标签: jquery-ui-droppable

我正在尝试开发一个具有以下功能的小页面:

1. 页面将有两个div:一个是#origin,包含很多缩略图,第二个是#drop,可以放下图像(最多只有3个).
2. 需要可以将图像从#drop拖放回原点.
3. #drop需要是可排序的,因为3个所选图像的顺序很重要.
4. 当放在#drop上时,图像应该对齐,就好像它们从一开始就显示原始图像一样.

我之前从未使用过jQuery,之前我甚至有一个工作页面原型,我已经通过本机HTML5拖放事件在两个容器之间进行了拖放,但是当我将sortable()jquery功能添加到#drop时,图像无法再被拖回#origin,这会破坏我的功能.

所以,我重新开始并希望实现拖放功能以及使用jQuery进行排序.我已经阅读了所有可拖动,可放置和可排序功能的完整API,但是我无法让它工作.不确定这是我用于每个功能的设置.

在小提琴上,您可以看到图像变得可拖动,我可以看到我指定的设置(不透明度,光标),但图像不能放在#drop上.

根据我的理解,使图像可拖动,图像具有"可拖动"类,以及使用".draggable"接受#drop droppable的组合,它应该允许最基本的功能,但即使这样也不会采取.另外我读到如果draggable和droppable都具有相同的"范围"设置,它也应该工作,但事实并非如此.

这是页面代码的简单版本,加上jsFiddle:http://jsfiddle.net/39khs/

码:

CSS:

#origin {
  background-color: green;
}
#drop {
  background-color: red;
  min-height: 120px;
}

JS:

$("img").draggable({ helper: "clone", opacity: 0.5, cursor: "crosshair", scope: "drop" });
$("#drop").droppable({ accept: ".draggable", scope: "drop"});
$("#drop").sortable();

HTML:

<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/140x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/140x100" id="three" title="three" class="draggable" />
    </div>
  <p>test</p>
    <div id="drop" class="fbox">

    </div>
</div>

任何帮助是极大的赞赏.

我使用jQuery droppable(与jQuery draggable结合使用)允许用户通过从列表中拖动项目并将其放在表格上来向HTML表格添加行.

这很好用,但是目前的逻辑是,当用户在表行上拖放时,新行将被添加到他们放置的行的下方.

如果新行的添加位置基于用户是否放入现有行的上半部分或下半部分,那会更好.

这是很容易在计算drop事件,但我需要给UI反馈用户拖动(我会用两个CSS类的方式做droppable-above,并droppable-below举例).

这似乎不可能,因为over事件只发射一次; 当用户最初拖过可投放元素时.

是否有可能得到over火,每鼠标移动,而用户是在投掷的元素事件？

如果是这样,那么我就能做到这一点:

$("tr.droppable").droppable({
    over: function(event, ui) {
        if (/* mouse is in top half of row */) {
            $(this).addClass("droppable-above").removeClass("droppable-below");
        }
        else {
            $(this).removeClass("droppable-above").addClass("droppable-below");
        }
    },

    out: function(event, ui) {
        $(this).removeClass("droppable-above").removeClass("droppable-below");
    },

    drop: function(event, ui) {
        $(this).removeClass("droppable-above").removeClass("droppable-below");
        if (/* mouse is in top half of row */) {
            // Add new row above the dropped …

这是它的样子;

$( "#box ul li" ).draggable({
    helper: "clone"
});
$( ".item" ).draggable({containment: ".door"});

$( ".door" ).droppable({
    accept: ":not(.ui-sortable-helper, .item)",
    drop: function( event, ui ) {
       $( "<div class='item'></div>" ).html(ui.draggable.find("img")).appendTo(this);
    }
});

用户拖动$("#box ul li")元素并将其放在$(".door")元素上.它将它附加到带有$(".item")选择器的$(".door")元素.

我正在使用jquery UI - Draggable来拖放项目.那里没有问题.

这是实际的问题;

但是当你开始拖动元素时,函数会改变元素的左侧和顶部位置,如; 上图:10px左:10px.但我想将基于百分比的项目拖到包含元素.它应该是 最高的:10%; 左:10%.

关于如何做到这一点的任何想法？

首先,我知道这个问题已经被问过,无论是在本网站和其他人,但答案都是废话我的情况下(如果他们不完全是废话),和(至少在问题在这里:jQuery UI的下降事件可拆卸的火灾可能会出现,建议只是.sortable完全关闭,这肯定不是我想要做的.

好吧,我有这个jQuery(记住,如果任何选项或HTML IDS都看傻了,这仅仅是测试,所以我可以尝试,并想出解决办法):

$(function () {
    $("#sortable").sortable({
        revert: true
    });
    $("#draggable, #draggable2").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });

    $("#sortable").droppable({
        drop: function (event, ui) { alert("done been triggered."); }
    });

    $("ul, li").disableSelection();
});

这是有效的标记:

<div class="objectPaletteHolder">
    <ul>
        <li id="draggable" class="ui-state-highlight">Drag me down</li>
        <li id="draggable2" class="ui-state-highlight">Drag this down, too</li>
        <li id="draggable2" class="ui-state-highlight">Drag this down, also</li>
        <li id="draggable2" class="ui-state-highlight">Drag this down, as well</li>
        <li id="draggable2" class="ui-state-highlight">Drag this down, too</li>
        <li id="draggable2" class="ui-state-highlight">Drag this down, too</li>
        <li id="draggable2" …

我正在开发一个项目,我将元素从第三方jQuery控件拖动到jQuery可排序,使用droppable和sortable的组合.

这种方法非常好,除了添加的项目始终添加到可排序列表的底部,然后您必须将其作为单独的步骤移动到正确的位置.

是否可以将项目添加到您将其放入列表中的位置？

您可以在此处的jQuery购物卡可放置演示中看到此行为.这是一个相同代码的jsfiddle.当您将产品中的商品添加到底部的购物车时,它总是会添加到底部,即使您将其放在顶部附近也是如此.

这是jQuery代码:

     $(function () {
     $("#catalog").accordion();
     $("#catalog li").draggable({
         appendTo: "body",
         helper: "clone"
     });
     $("#cart ol").droppable({
         activeClass: "ui-state-default",
         hoverClass: "ui-state-hover",
         accept: ":not(.ui-sortable-helper)",
         drop: function (event, ui) {
             $(this).find(".placeholder").remove();
             $("<li></li>").text(ui.draggable.text()).appendTo(this);
         }
     }).sortable({
         items: "li:not(.placeholder)",
         sort: function () {
             $(this).removeClass("ui-state-default");
         }
     });
 });

我尝试使用谷歌搜索并无法找到它,但我认为这是一个相当简单的任务.http:// jsfiddle我试图摆脱恢复动画(NB我想保留恢复动作,只是想删除它还原的动画)当你从左侧向右侧放下时:http:// jsfiddle .NET/2fsVZ /

这是我正在寻找的长短不一之处:

下面是我正在使用的JavaScript - 如何告诉它不为恢复设置动画？

  $( ".before .left-side>div" ).draggable({ revert: true});

我正在使用jQuery UI,可以创建一个简单的拖放列表.但是现在,我想把元素放到另一个列表中.jQuery总是认为该项目已经丢弃在错误的地方并将其滑回原始列表.

正如你在这里看到的:http://jsfiddle.net/rA4CB/6/

当我在重叠区域中进行下降时,它会在两个droppable中接收,当项目是兄弟姐妹时,贪婪不起作用.有没有办法阻止zIndex中较低的droppables接收？

顺便说一句,mouseOver不会为droppable元素触发,因为鼠标实际上在可拖动元素上.

相关JS:

$(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
        tolerance:'pointer',
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
    $( "#droppable2" ).droppable({
        tolerance:'pointer',
        greedy:true,
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
});

所以我的屏幕右下方有一个固定的可放置div.我有一个可拖动到垃圾箱中的可拖动列表(固定的可放置)但我不想在将它们拖到垃圾箱附近时显示水平滚动条.我不希望draggables能够水平滚动.页面上还有其他可放置的droppable,它们可以放入,因此它们必须垂直滚动才能到达它们.

这里是一个的jsfiddle的问题.

谢谢

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

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

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

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