仰望_hey_123_
2017-07-24 09:24
采纳率: 50%
浏览 1.8k

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
                    }
    
    点赞 打赏 评论
  • 张大教主 2017-07-24 09:30
    首先,要使用js都使用js,不要jquery和js混合使用,另外使用easyui接口,页面要引入easyui相关的easyui.min.js和jquery.min.js
    文件 否则是会报错的哦
    
    点赞 打赏 评论
  • 张大教主 2017-07-24 09:57
    //你其他地方写法也有些问题,我下面给你重新写了一份
    <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>
    
    点赞 打赏 评论

相关推荐 更多相似问题