Javascript jqueryui：拖动多个对象

我的场景：容器（div）和一些对象（div）。可以在容器内移动对象（将选项包容设置为父对象）

现在我需要一次移动多个对象。为此，我找到了一个有用的插件。不幸的是，正如所报道的，这个插件不能处理属性包含

，禁用此功能

$(".obj").on("drag", function(ev, ui)

要激活多重拖动，请单击对象。我能够阻止拖动事件

我的测试问题： 在这一点上，我不知道如何重新激活阻力

注 我应该知道拖动的方向（使用开始-停止事件）。但在这一点上，我无法阻止阻力

我的解决方案 但是K Scandrett解决方案也非常好。这是很难适用于我的特殊情况，这已在示例中简化

始终使用插件来启用多重拖动。每次选择多个对象并拖动它们时，我都会在dragstart事件中执行此操作（根据选定对象的位置更改对象的属性包含）：

//1024*648是容器的宽度
$（obj）.unbind（“dragstart”）.bind（“dragstart”，函数（ev，ui）{
变量dimObjFirst={
x:parseInt（$（this）.css（“左”），
y:parseInt（$（this.css（“top”））
};
如果（$（$bla>div.ui-selected”）.length>1）{
var minLeft=1024，maxRight=0，minTop=648，maxDown=0；
$（“blabla>div.ui-selected”）。每个（函数（）{
var elem=$（本）；
变量dim={
w:parseInt（elem.css（“width”），
h:parseInt（elem.css（“高度”），
l:parseInt（elem.css（“左”），
t:parseInt（elem.css（“top”）），
};
如果（dim.lmaxRight）maxRight=dim.l+dim.w；
如果（dim.tmaxDown）maxDown=dim.t+dim.h；
});
var offsetContainer=$（“.container”）.offset（）；
$（this）.draggable（“选项”，“包含”[
（dimObjFirst.x-minLeft）+parseInt（offsetContainer.left），
（dimObjFirst.y-minTop）+parseInt（offsetContainer.top），
（dimObjFirst.x+（1024-maxRight））+parseInt（offsetContainer.left），
（dimObjFirst.y）+（648-maxDown）+parseInt（offsetContainer.top）
]);
}           
});
$（obj）.解除绑定（“dragstop”）。打开（“dragstop”，功能（ev，ui）{
如果（$（$bla>div.ui-selected”）.length>1）{
$（“blabla>div.ui-selected”）。每个（函数（）{
$（this）.draggable（“选项”、“包含”、“父项”）；
});
}
});

---

并添加这行代码

this._setContainment（）在jQuery UI插件的函数
\u mouseDrag
的开始处。
看起来像一个有趣的项目，所以

我用一个边界框实现了它（类似于Twisty的评论）

我认为这样做的好处是，它会将所有多个选定对象约束到容器的边界

我给边界框涂上了颜色，这样你可以想象它是如何工作的。当然，在实践中，您可能会让它保持透明

代码注释是内联的，但是如果您有任何关于代码的问题，都会很乐意回答

没有使用插件（只使用jQuery和jQueryUI）


var disableclick=false；
变量boundingBoxTop、BoundingBoxBoxBottom、boundingBoxLeft、boundingBoxRight；
var$container=$（“#container”）；
var containerHeight=$container.height（）；
var containerWidth=$container.width（）；
var containerTop=$container.offset（）.top；
var containerLeft=$container.offset（）.left；
//将边界框添加到容器并使其可拖动
var$boundingBox=$（“”）。prependTo（$container）；
$boundingBox.draggable({
网格：[10,10]，
遏制：“家长”，
停止：功能（事件、用户界面）{
disableclick=true；//拖动时不想切换选择
设置超时（函数（e）{
disableclick=false；
},200);
},
});
$（“.obj”）。单击（函数（e）{
如果（！禁用单击）{
var$objClicked=$（此）；
$objClicked.toggleClass（“选中的ui”）；
var$selectedItems=$（“#container.ui selected”）；
//在重新处理边界框中的所有项目之前，请将其移回容器中
$boundingBox.find（'*'）.each（function（）{
var$this=$（this）；
如果（$this.parent（）是（$boundingBox））{
//调整其相对于容器的位置
$this.css（“top”，（$this.offset（）.top-containerTop）+“px”）；
$this.css（“left”，（$this.offset（）.left-containerLeft）+“px”）；
$container.append（$this）；//将其返回到容器
}
});
//将co-ords反转为此处可能期望的值，以便我们可以将其缩放回边界框所需的值
boundingBoxTop=容器高度；
boundingBoxBottom=0；
boundingBoxLeft=容器宽度；
boundingBoxRight=0；
//查找覆盖所有当前选定对象的最小矩形的边界
$selectedItems.each（函数（）{
var$this=$（this）；
var top=$this.offset（）.top-containerTop；
var bottom=$this.offset（）.top-containerTop+$this.height（）；
var left=$this.offset（）.left-containerLeft；
var right=$this.offset（）.left-containerLeft+$this.width（）；
boundingBoxTop=（顶部boundingBoxBottom）？底部：boundingBoxBottom；
boundingBoxLeft=（左boundingBoxRight）？右：boundingBoxRight；
});
//获取边界框的高度和宽度
var boundingBoxHeight=boundingBoxBottom-=boundingBoxTop；
var boundingBoxWidth=boundingBoxRight-=boundingBoxLeft；
//1024 * 648 is the width of the container
$(obj).unbind("dragstart").bind("dragstart" , function(ev, ui){

    var dimObjFirst = {
        x : parseInt($(this).css("left")),
        y : parseInt($(this).css("top"))
    };
    if($("blablabla > div.ui-selected").length > 1){

        var minLeft = 1024,maxRight = 0,minTop = 648,maxDown = 0;

        $("blablabla > div.ui-selected").each(function(){
            var elem = $(this);
            var dim = {
                w : parseInt(elem.css("width")),
                h : parseInt(elem.css("height")),
                l : parseInt(elem.css("left")),
                t : parseInt(elem.css("top")),
            };
            if(dim.l < minLeft) minLeft = dim.l;
            if(dim.l + dim.w > maxRight) maxRight = dim.l + dim.w;
            if(dim.t < minTop) minTop = dim.t;
            if(dim.t + dim.h > maxDown) maxDown = dim.t + dim.h;
        });

        var offsetContainer = $(".container").offset();
        $(this).draggable( "option" , "containment" , [
          (dimObjFirst.x - minLeft) + parseInt(offsetContainer.left),
          (dimObjFirst.y - minTop) + parseInt(offsetContainer.top),
          (dimObjFirst.x + (1024 - maxRight)) + parseInt(offsetContainer.left),
          (dimObjFirst.y) + (648 - maxDown) + parseInt(offsetContainer.top)
        ]);
    }           
});

$(obj).unbind("dragstop").on("dragstop", function(ev, ui) {

    if($("blablabla > div.ui-selected").length > 1) {
        $("blablabla > div.ui-selected").each(function(){
            $(this).draggable( "option" , "containment" , "parent" );
        });
    }
});