js 新添加的节点 实现拖拽?

HTML部分:
id 是phonebox的div

JS部分:

window.onload=function(){
//点击鼠标即可添加 节点
phonebox.onmousedown=function addDom(event){
var event = event || window.event;
downx=event.offsetX;
downy=event.offsetY;

                            var newDiv=document.createElement("div"); //添加新的节点div
                            newDiv.id="newdiv";

                            newDiv.style.left=downx;
                            newDiv.style.top=downy;

                            x=event.target; //判断鼠标不在子节点上时候才执行添加节点的操作
                            if(x.id=='phonebox'){
                                phonebox.appendChild(newDiv);
                            }   
        }
        //拖拽节点
        $(function(){
            $('#newdiv').draggable();
        });

}

疑问:拖拽这里用了 EasyUI 里的draggable(),这个位置现在这样写没法拖拽,(纯新手)请问题正确应该怎么写?谢谢!

3个回答

。。导入了jquery还用原生js干嘛。。绑定draggable效果位置不对,看下面的,有用记得采纳:)。。

                 if (x.id == 'phonebox') {
                    phonebox.appendChild(newDiv);
                    $('#newdiv').draggable();/////////放这里来,你是通过事件触发的添加,执行$(function () {$('#newdiv').draggable(); });这句你的dom还没有当然无法绑定draggable
                }
qq_33346834
仰望_hey_123_ 回复showbo: 试了 可以了 谢谢
大约 3 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复仰望_hey_123_: id重复了。。直接操作新生成的dom对象。 改这样$(newDiv).draggable();
大约 3 年之前 回复
qq_33346834
仰望_hey_123_ 试了下 貌似只能 拖动 第一次点击添加的节点,后面添加的就没法拖动
大约 3 年之前 回复
首先,要使用js都使用js,不要jquery和js混合使用,另外使用easyui接口,页面要引入easyui相关的easyui.min.js和jquery.min.js
文件 否则是会报错的哦
qq_33346834
仰望_hey_123_ 回复张大教主: 十分感谢!
大约 3 年之前 回复
u014074697
张大教主 <script type="text/javascript" src="http://www.srcfans.com/js/jquery-1.9.1.min.js"></script>把这句加入到页面中试一下
大约 3 年之前 回复
u014074697
张大教主 另外,draggable()不是easyui的,是jquery的功能,所以你只需引入jquery文件就可以了
大约 3 年之前 回复
//你其他地方写法也有些问题,我下面给你重新写了一份
<script type="text/javascript" src="http://www.srcfans.com/js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
//点击鼠标即可添加 节点
$("#phonebox").onmousedown=function (event){
    var e = event || window.event; 
    downx=e.pageX;
    downy=e.pageY;
    //你当前是给#phonebox绑定的点击事件,所以触发时鼠标肯定在当前对象上,直接附加
    $("#phonebox").append('<div id="newDiv" style="width:100px;height:100px;background:green"/>');
    $("#newDiv").css('left',downx);
    $("#newDiv").css('top',downy);
    $("#newDiv").draggable();   
})
</script>
u014074697
张大教主 $("#phonebox").onmousedown,替换成$("#phonebox").mousedown,忘改了
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐