Question

当我使用.draggable并且在调用draggable({containment : "parent"})之前元素在父级之外

它只是在拖动后放在父级内部，我需要在调用draggable之后立即将它放到父级中

以下是一个示例：Fiddle

Answer 1

您可以使用jquery draggable的create( event, ui )事件。

创建可拖动时触发。

解决方案：

     $('.draggable').draggable({
  containment: "parent"
}, {
  create: function(event, ui) {
    var parent1 = $(this).parent();
    var top = $(this).offset().top;
    var left = $(this).offset().left;
    var width = $(this).width();
    var height = $(this).height();
    console.log(top+height);
 if (left < parent1.offset().left){
       $(this).offset({left: $(this).parent().offset().left});
    }
    if (top < parent1.offset().top){
        $(this).offset({top: $(this).parent().offset().top});
    }
    if ((left + width > parent1.width()+parent1.offset().left)){
         $(this).offset({left: ($(this).parent().offset().left+parent1.widhth()-width)});
    }
    if(top + height > parent1.height()+parent1.offset().top){
         $(this).offset({top: ($(this).parent().offset().top+parent1.height()-height)});
    }    
  }
});

Updated Fiddle

参考：http://api.jqueryui.com/draggable/#event-create

Answer 2

我找到了正确的解决方案：

https://jsfiddle.net/ddwsL0sc/12/

可以调用内部函数

$(".draggable").draggable({containment : "parent"});
$('.draggable').draggable().data("ui-draggable")._mouseStart({pageX:0, pageY:0});
$('.draggable').draggable().data("ui-draggable")._mouseDrag({});
$('.draggable').draggable().data("ui-draggable")._mouseStop({});

调用draggable之前的父级之外（{containment：“parent”}）

2 个答案: