Jquery 将项目拖放到div，并可以选择还原到原始位置

如上所述，我希望能够从我拥有的某种菜单中拖动一些div，并能够将它们放到特定的div。。 我设法做到了这一点

但是，我想在每个元素上添加一个“x”按钮，以便单击“x”按钮后，可拖动/可拖放元素将返回（还原）到其原始位置

我找到了这个

这似乎是我想要的（事实上，我希望每个按钮都有一个唯一的按钮，而不是一个整体按钮）。。 但是 1） 即使在jsfiddle上，这似乎也不会被删除 2） 在我的测试中，我在控制台中得到一个错误 “未捕获的TypeError:无法读取未定义的属性'originalPosition'”

具体来说，错误出现在这一行ui.draggable.data（“draggable”）.originalPosition）

这里是js部分

function revertDraggable($selector) {
    $selector.each(function() {
        var $this = $(this),
            position = $this.data("originalPosition");

        if (position) {
            $this.animate({
                left: position.left,
                top: position.top
            }, 500, function() {
                $this.data("originalPosition", null);
            });
        }
    });
}   

$(document).ready(function() {
    $("#drag").draggable({
        revert: "invalid"
    });

    $("#floor").droppable({
        drop: function(event, ui) {
            if (!ui.draggable.data("originalPosition")) {
                ui.draggable.data("originalPosition",
                    ui.draggable.data("draggable").originalPosition);
            }
        }
    });

    $("#other").click(function() {
        revertDraggable($("#drag"));
    });

});

我的html是这样的

可下降位置我只想在foo中下降

<div id="container">
    <div id="floor">foo</div>
    <div id="other">bar</div>
</div>

福
酒吧

以及初始位置

 <div class="menu" id="power" width="300">
<div class="options ui-widget-content" id="drag"><img src="1.jpg"/></div>
    <div class="options ui-widget-content" id="drag2"><img src="2.jpg"/></div>
</div>

---

p、 只有jquery而不是pluginjquery.ui能解决这个问题吗？

来自两个示例的混合代码

    $('#floor').droppable({
    tolerance: 'fit'
});

$('.draggable-div').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
        $(this).find('.undo').show();
    }
});

$('.draggable-div').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
    revertDraggable($div);
});

$('#floor').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
       // ui.draggable.draggable('option','revert',true);
        if (!ui.draggable.data("originalPosition")) {
        ui.draggable.data("originalPosition",
                          ui.draggable.data("draggable").originalPosition);
        
        }


        $(this).find('.undo').show();
    }
});

function revertDraggable($selector) {
    $selector.each(function() {
        var $this = $(this),
            position = $this.data("originalPosition");

        if (position) {
            $this.animate({
                left: position.left,
                top: position.top
            }, 500, function() {
                $this.data("originalPosition", null);
            });
        }
    });
    
    $selector.find('.undo').hide();
}

请参阅完整代码

---

它现在可以工作了

来自2个示例的混合代码

    $('#floor').droppable({
    tolerance: 'fit'
});

$('.draggable-div').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
        $(this).find('.undo').show();
    }
});

$('.draggable-div').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
    revertDraggable($div);
});

$('#floor').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
       // ui.draggable.draggable('option','revert',true);
        if (!ui.draggable.data("originalPosition")) {
        ui.draggable.data("originalPosition",
                          ui.draggable.data("draggable").originalPosition);
        
        }


        $(this).find('.undo').show();
    }
});

function revertDraggable($selector) {
    $selector.each(function() {
        var $this = $(this),
            position = $this.data("originalPosition");

        if (position) {
            $this.animate({
                left: position.left,
                top: position.top
            }, 500, function() {
                $this.data("originalPosition", null);
            });
        }
    });
    
    $selector.find('.undo').hide();
}

请参阅完整代码

---

它现在可以工作了

谢谢你的回复，伙计……但由于某种原因，我一直收到一个错误，未捕获类型错误：当我将Dragable移动到“floor”分区时，无法读取undefined的属性“originalPosition”哪个浏览器？还有：你在尝试我的示例吗？在JSFIDLE中效果很好，当我在整个站点中粘贴代码时，我只得到了这个错误。它确实得到并删除了代码，但在那里结束了。接下来什么都没有发生。chrome和Firefox我也在空白文档中粘贴了代码，我仍然得到了相同的问题：在你使用的FIDLE示例中：jquery 1.5.2和jquery ui 1.8.9。使用相同的版本或同时更新jquery和jquery ui。这里有一个更新了插件的版本：谢谢你的回复，伙计……但是由于某种原因，我一直收到一个错误，未捕获类型错误：当我将draggable移动到“floor”div中时，无法读取未定义的属性“originalPosition”？还有：你在尝试我的示例吗？在JSFIDLE中效果很好，当我在整个站点中粘贴代码时，我只得到了这个错误。它确实得到并删除了代码，但在那里结束了。接下来什么都没有发生。chrome和Firefox我也在空白文档中粘贴了代码，我仍然得到了相同的问题：在你使用的FIDLE示例中：jquery 1.5.2和jquery ui 1.8.9。使用相同的版本或同时更新jquery和jquery ui。这里有一个插件已更新的版本：