标签: jquery-ui-droppable

我希望有几类draggables,每一类都对应一类droppables.但另外,我想要一个单独的"垃圾箱",可以放下所有可拖动物,直到可以找到合适的可放置物.

现在,使用accept函数可以轻松实现这一点.但是,我最多可以有20个班级,每个班级有30-40个可拖动/可放置.因此,如果我为此使用"接受"功能,那么当我拿起一个可拖动的时候,我的镀铬会冻结,因为它会对屏幕上的每个可丢弃的测试运行测试:(

如果我使用'scope'属性,这可以解决,因为它似乎使用了一些不同的方式.但是,当我使用示波器时,我似乎无法实现"垃圾箱"概念,因为它只能有一个示波器!

有没有办法绕过这个问题？给可拖动的多个范围,或给垃圾箱多个范围？或者也许是其他一些我想不到的解决方案？

我正在使用脚本轻松地使用jQuery UI对嵌套列表进行排序.它工作得很好,但有一个我无法抹去的"小虫".

使用jsfiddle(http://jsfiddle.net/fewTp/)和下面的说明来了解发生了什么:)

如果你将一个子点拖得更深一级(将"子菜单2"向右拖动并将其放下,使其更深一些级别)并尝试再次将其拖回来,就会发生"错误".正如您所看到的,在您将"submenu2"向左拖动的那一刻,"submenu1"将跳下.

如果你不喜欢jsfiddle这里是我的代码:

HTML:

    <ul>
    <li>
        <span><p>menu 1</p>
            <ul>
                <li>
                    <span><p>submenu 1</p>
                        <ul></ul>
                    </span> 
                </li>
                <li>
                    <span><p>submenu 2</p>
                        <ul></ul>
                    </span> 
                </li>
            </ul>
        </span>
    </li>
    <li>
        <span><p>menu 2</p>
            <ul>
                <li>
                    <span><p>submenu 1</p>
                        <ul></ul>
                    </span> 
                </li>
                <li>
                    <span><p>submenu 2</p>
                        <ul></ul>
                    </span> 
                </li>
            </ul>
        </span>
    </li>
</ul>

CSS:

    * {
    font-family: Arial;
}
span {
    cursor: move;
    display: inline-block;
    margin: 0 10px 10px 10px;
   /* margin-bottom: -62px;*/
}
p {
    margin: 0;
    border-radius: 5px;
    border: 1px solid #793D00;
    padding: …

解决

所以我sortable()对该connectWith属性进行了一些研究,发现解决方案比我想象的更简单,但我认为它有点倒退,因为draggable()和droppable().

这是小提琴:http://jsfiddle.net/DKBU9/12/

原始问题如下:

这是我之前认为应该分开的SO问题的延伸.

原始问题在这里:jQuery UI - 在drop事件之后克隆droppable/sortable列表.它涉及重新初始化克隆元素上的droppable处理程序.

除此之外,我试图允许从初始列表中拖动的元素在可放置列表中进行排序.

这是一个小提琴,基本上是原始问题的结果:http://jsfiddle.net/DKBU9/7/

和所需的代码,因为SO喜欢抱怨和膨胀这些帖子:

HTML

<ul id="draggables">

    <li>foo1</li>
    <li>foo2</li>
    <li>foo3</li>

</ul>

<ul class="droppable new">

</ul>

JS

$(function() {

    $('#draggables > li').draggable({
        appendTo: 'document',
        revert: 'invalid'
    });

    $('.droppable > li').draggable({
        appendTo: 'document',
        revert: 'invalid'
    });

    $('#draggables').droppable({
        accept: '.droppable > li',
        drop: function(event, ui) {
            ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this));
            cleanUp();
        }
    });

    initDrop($('.droppable'));

});

function initDrop($element) {

    $element.droppable({
        accept: …

在droppable区域中放置元素时更改html.

这样的事情:http://the-stickman.com/files/jquery/draggable-sortable.html

但是当我放置元素更改放置html.

其他示例:我有2个列表第一个可拖动列表和第二个可放置列表,当我从第一个列表拖动元素并将该元素放入第二个列表时,该元素将被克隆到第二个列表

拖动:

<a href="#">test</a>

下降:

<a href="#">test</a>

我想将此html更改为

拖动:

<a href="#">test</a>

下降:

<div class="toggle"><a href="#">test</a></div>

我有一些可排序的连接列表,它们同时是可放置的位置.问题是当我在droppable的drop事件中调用可排序的cancel方法时,sortable会被破坏而不再工作.示例http://jsfiddle.net/zSnBA/10/尝试在第二个列表中移动div编号102:您将看到将调用cancel事件但是可排序不再工作？有帮助吗？

任何人都可以帮我解决这些代码:http: //jsfiddle.net/tVzq9/2/

我试图让div'.boxArt'捕捉到父div'.drop',但是它的回复方式与之相同(所以它很流畅).此刻它会落到div上,但不适合它.对drop div使用"tolerance:'fit'"不起作用,因为它很难准确定位在它上面.谢谢您的帮助!

我被要求创建一个正方形网格,其中每个正方形可能包含或不包含链接,这些链接应该能够围绕网格移动.

我认为draggable/droppable是可行的方式并且它工作正常,但是,现在我们希望能够让draggables交换,如果一个被丢弃在另一个之上.所以它现在看起来像是可以排序的.但是,sortable看起来更像是列表的意思,而我没有像列表那样编写它.

有没有一种简单的方法来制作我到目前为止所做的工作,或者我是否需要使用可排序的方式完全重写它？我是javascript的新手,我花了一段时间才能做到这一点,而且我不是要求代码,但我担心必须重新计算整个事情!任何意见？

这是我的代码的小提琴:http://jsfiddle.net/kvVkT/

和代码:

HTML

<div id="gridcontainer">
    <div id="-2:-2" class="droppable occupied">
        <a href="" id ="508" class="bookmark draggable white" title="white" "target="_blank">1</a>
    </div>
    <div id="-2:-1" class="droppable">2</div>
    <div style="clear:both"></div>
    <div id="-2:0" class="droppable">3</div>
    <div id="-2:1" class="droppable occupied">
        <a href="" id ="567" class="bookmark draggable white" title="white" "target="_blank">4</a>
    </div>
    <div style="clear:both"></div>
</div>

CSS

#gridcontainer{position:relative;padding:25px;color:#ff0004;background:#ffffff;}
.droppable{width:65px; height:65px;float:left; margin:5px;background:#000000;}
.bookmark {float:left;width:65px; height:65px;display:block;position:absolute;}
.position{float:left;width:65px; height:65px;display:block;}
.position:hover{background-image:url(../img/tilehover.png);}
.bookmark.ui-draggable-dragging {-moz-box-shadow: 0 0 5px #d9d9d9; -webkit-box-shadow: 0 0 5px #d9d9d9; box-shadow: 0 0 5px #d9d9d9;}
.draggable{ background:#888888;}
[draggable] …

我有一个div元素,我希望能够拖动到缩放元素.但是,当我这样做时,div元素不会转到元素的右边坐标,但是当我第二次拖动它时它会这样做.

我还认为当元素添加时它会扩展,我想尝试避免.

谁能帮我解决这个问题？(特别是整个没有去正确的地方的东西)

我已经尝试过这样的东西来获得div的实际坐标,但是我不知道如何将它转换为可拖动的元素,因为mousemove当我拖动某些东西时它不起作用.

$("body").on("mousemove", ".formBackground", function(e){
    div_x = (e.offsetX != null) ? e.offsetX : e.originalEvent.layerX;
    div_y = (e.offsetY != null) ? e.offsetY : e.originalEvent.layerY; 

    console.log("x "+div_x+" y "+div_y); 
});

这是我的实际代码和我的JSFIDDLE的链接

HTML

<div id="drag1" class="drag" style="font-size:12px;background-color:#E2F4FE;width:220px;padding:10px;color:#000;font-weight:normal;">New box</div>
<br />
<br />
<div id="formBox">
    <div id="formScale">
        <div class="formContent">
            <div class="formBackground" style="background-image:url('http://i.imgur.com/roOQNaS.png');"></div>
        </div>
    </div>
</div>

JS

var percent = 1.5;

$("#formScale").css({
    'transform': 'scale(' + percent + ')',
        '-moz-transform': 'scale(' + percent + ')',
        '-webkit-transform': 'scale(' + percent + …

我有一个名为dropable的无序列表<ul class="droppable">.在无序列表中,我动态生成了名为list的列表项<li class="placeholder"></li>,这些列表项也是可放置的.

在占位符之间删除可拖动项目时,一切正常.但是当在其<li class="placeholder"></li>自身上放置可拖动项目时,可拖动项目将附加到占位符和无序列表.

所以我得到了它的双重克隆.

这是一个有视觉例子的jsfiddle.我知道在我的页面上获得双重克隆是合乎逻辑的,但我不知道如何禁用它...

任何帮助是极大的赞赏!

更新:如果您将可拖动项目垂直拖动到可放置元素上,它们会自动追加？怎么可能？

我有3个div元素都有类abs,只有其中一个有和其他类outside,如下所示.所有元素都是可拖动和可放置的(使用jquery ui).

问题是我不希望带有类的div outside被放入其他absdiv或接受任何absdiv被放入其中.我只希望能够在没有任何存在的情况下abs进入其他人.我尝试了以下但我仍然可以将div拖入其他div.我不要那个.你能帮我指导一下防止这种情况发生的正确方法. absoutsideoutsideabs

在http://jsfiddle.net/PWh2L/上查看jsfiddle

<div class="abs"></div>
<div class="abs outside"></div>
<div class="abs"></div>

$('.abs').draggable();
$('.abs:not(.outside)').droppable({
    accept: '.abs',
    hoverClass: "drop-hover",
    tolerance: "pointer",
    greedy: true
})