相关疑难解决方法(0)

有没有办法让div通过jquery draggable()拖动时彼此不重叠？

我有一堆用户可以拖动但我不能让它们相互重叠的div.

基本上我正在创建一个画布,用户可以在网站上自由移动网站的内容,但移动时不需要重叠其他内容.有任何想法吗？

我有两个清单.第一个是可拖动的项目(像这样).它连接到第二个,这是一个可排序的列表(像这样).

第一个列表中的项目可以通过拖动它们添加到第二个列表中.然后将它们克隆并变为绿色,以便用户可以看到它们是未保存的添加物.

我想要发生的是当你从第二个列表中拖出一个项目时,它将被标记为删除,或者被发送回第一个列表(如果它是未保存的添加).但是我也希望人们能够对第二个列表进行排序.

因此,如果他们拖出一个项目并释放鼠标,它应该被删除.如果他们将一个项目拖出来又重新进入,则不应将其删除.

我已经尝试在一个sortout中包装一个mouseup处理程序,我最终使用它,但是你不能对列表中的项进行排序.

我应该采取什么想法？

我在jsfiddle中有这个例子

我有一个var作为碰撞元素:

var $div = $('.container');

然后碰撞:

function test (){
    $('.drag')
        .drag("start",function( ev, dd ){
            dd.limit = $div.offset();
            dd.limit.bottom = dd.limit.top + $div.outerHeight()
                - $( this ).outerHeight();
            dd.limit.right = dd.limit.left + $div.outerWidth()
                - $( this ).outerWidth();
        })
        .drag(function( ev, dd ){
            $( this ).css({
                top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
            });   
        });
}

对于:

<div class="container"></div>
<div class="drag xxx" style="left:40px;"></div>
<div class="drag xxx" style="left:120px;"></div>
<div class="drag xxx" style="left:200px;"></div> …

我编写了大部分代码......当元素"完全"覆盖其他元素时,它就可以工作了.问题是,当元素"完全"在元素上时,我不仅仅希望它是真的,当元素部分地超过另一个元素时,我也希望它是真的.

这是我的代码:

    element = this.element.getStyles('left', 'top', 'width', 'height');
    elementLeftX = element.left.toInt();
    elementLeftY = element.top.toInt();
    elementRightX = (element.width.toInt() + element.left.toInt());
    elementRightY = (element.top.toInt() + element.height.toInt());

    el = this.positions ? this.positions[i] : this.getDroppableCoordinates(el); // Element drop area
    elLeftX = el.left.toInt();
    elLeftY = el.top.toInt();
    elRightX = (el.width.toInt() + el.left.toInt());
    elRightY = (el.height.toInt() + el.top.toInt());

   if (((elLeftY <= elementLeftY) && (elementLeftY <= elRightY)) && ((elLeftY <= elementRightY) && (elementRightY <= elRightY))) {
        if (((elLeftX <= elementLeftX) && (elementLeftX <= elRightX)) && ((elLeftX <= elementRightX) …

我在jquery/javascript中制作游戏.游戏是用鼠标点击屏幕来击中一个移动物体.我的检测位有问题.是否有jQuery/javascript函数可以随时测量两个对象中心之间的距离？然后,我可以轻松地控制检查两个中心的距离.和如果碰撞.他们都是两个圈子.

<div id="box">
        <div id="prepend">
            <div id="hero"></div>
        </div>

        <div id="enemy"></div>
</div>

"盒子"是游戏发生的区域,"英雄"是你要击中"敌人"的子弹.