jquery - 在 div 中拖动一个 div

Question

我正在使用“easyui”jquery 来拖动 div，但问题是 div 在整个体内拖动而不是在父 div 中。

代码：

$('#dd2').draggable();
$('#dd3').draggable();
$('#dd4').draggable();

Answer 1

使用 jQuery 用户界面：

$( "#draggable").draggable({ containment: "parent" });

如果你的easyui只是jQuery ui，就是这个样子，你没问题

jQuery UI 文档

Answer 2

嗨朋友我得到了解决方案，在你的脚本中添加一些代码

  <script>
function constrain(e){
    var d = e.data;
    if (d.left < 0){d.left = 0}
    if (d.top < 0){d.top = 0}
    if (d.left + $(d.target).outerWidth() > $(d.parent).width()){
        d.left = $(d.parent).width() - $(d.target).outerWidth();
    }
    if (d.top + $(d.target).outerHeight() > $(d.parent).height()){
        d.top = $(d.parent).height() - $(d.target).outerHeight();
    }
}
</script>
<div style="position:relative;overflow:hidden;border:1px solid #ccc;width:400px;height:400px">
<div class="easyui-draggable" style="width:100px;height:100px;border:1px solid #ccc" data-options="
            onDrag: function(e){
                constrain(e);
            },
            onStopDrag: function(e){
                constrain(e);
                $(this).css(e.data);
            }
        ">
</div>
</div>

参考：http ://www.jeasyui.com/forum/index.php?topic=820.0;prev_next=prev#new

Answer 3

用 EasyUI....

您必须将父 div 设置为可放置...

请查看此文档... http://www.jeasyui.com/documentation/index.php#

这是教程.. http://www.jeasyui.com/tutorial/dd/dnd2.php

例如：

$('#yourparentDivsID').droppable({   //used ID in my case... you can use class ... or parent's selector
   onDragEnter:function(e,source){   //do your stuff here
      $(source).draggable('options').cursor='auto';  
   },  
   onDragLeave:function(e,source){  //do your stuff here
      $(source).draggable('options').cursor='not-allowed';  
   }, 
})