Question

以下是我的代码示例：http://jsfiddle.net/german_martin/hr8Q7/1/

我有一个名为“Unassigned container”的容器，里面有其他可拖动的对象（“标题A”，“标题B”等等）我还有其他4个名为“Container”的容器

我的问题示例：当用户将“标题A”（或其他）放入“容器”时，一切正常，但当用户将“标题...”放在外面时，此元素必须返回“未分配的容器” “

问题：有没有办法让“title ...”在用户将其置于“容器”之外时返回“未分配的容器”？

图片示例：

Image example

   $(function () {

        $(".unassignedClassContainer").sortable({
            connectWith: ".container",
            handle: ".title",
            revert: true
        });

        $(".container").sortable({
            connectWith: ".container, .unassignedClassContainer",
            handle: ".title",
            revert: true
        });
  });

Answer 1

我曾经做过这样的事情。我使用以下代码进行可拖动。

$(".draggable").draggable( {
        containment: '#content',
        cursor: 'move',
        snap: '#dropSlots',
        snapMode: "inner",
        start: function(){
            Positioning.initialize($(this));
        },
        stop: function() {
            Positioning.reset($(this));
        }
    } );

使用：

var Positioning = (function () {
    return {
        //Initializes the starting coordinates of the object
        initialize: function (object) {
            if ( object.data("dragged") != "1" ) {
                object.data("dragged", "1");
                object.data("originalLocation", $(this).originalPosition = {top:0,left:0});
            }
        },
        //Resets the object to its starting coordinates
        reset: function (object) {
            if ( object.data("dragged") == "1" && object.data("inDroppable") != "1" ){
                var OriginalLocationTop = object.data("originalLocation").top;
                var OriginalLocationLeft = object.data("originalLocation").left;
                $(object).animate({top: OriginalLocationTop, left: OriginalLocationLeft}, 1500);
            }
        },
    };
})();

正如您所看到的，它使用object.data("inDroppable")，这是在拖放器上放置了一个拖动器时设置的。

Droppable code：

$('.droppable').droppable( {
     drop: handleQuestionDrop,
     out: handleQuestionMoveOut,
     tolerance: "pointer"
} );

这是使用以下两个功能：

function handleQuestionMoveOut( event, ui ) {
    $(ui.draggable).data("inDroppable", "0");
    // A lot of other project related stuff, deleted...
}

function handleQuestionDrop( event, ui ) {

    // position draggable directly on top of the slot
    ui.draggable.position( {                
        my: 'left top',
        at: 'left top',
        of: $(this),
        using: function(css, calc) {
            ui.draggable.animate(css, 250, "linear");
        }           
    } );

    $(ui.draggable).data("inDroppable", "1");
}

正如您所看到的那样，代码很多，我已经删除了所有不相关的代码。那么这段代码实现的是：

第一次拖动时，为你的拖动器提供一个“起始坐标”。
停止拖动这些拖车时，检查它们是否落在了落点中。
- 如果他们这样做，请将其放在插槽顶部。
- 如果没有，请将它们置于原始坐标之上

随意提出任何问题;）

在不可丢弃的部分中删除jQuery可拖动对象时，将其还原回特定容器

1 个答案: