Question

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

代码：

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

Answer 1

使用jQuery ui：

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

如果您的 easyui 只是jQuery ui，这就是它的样子，你就是o.k。

jQuery UI docs

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设为droppable ......

请查看此文档...... 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';  
   }, 
})

在div中拖动一个div

3 个答案: