jQuery UI - 将 jQuery 可拖动对象恢复为其原始状态?

标签 jquery jquery-ui

在 HTML 文件中,我想将一个项目拖放到目标,假设我想将另一个项目放到同一位置,此时这两个项目都应该被覆盖。如果两个项目都覆盖了新项目应该恢复到原来的位置。任何人都可以帮助我如何将新项目恢复到原来的位置。 这是我的代码。

$(function () {
    $(".draggable2").draggable({
        revert: "invalid"
    });
    $("#droppable").droppable({
        drop: function () {
            //var xPos = offset.left;
            //var yPos = offset.top;    
            //alert( $(this).position().left );         
            $(this).find("p").html("Yes,it is dropped!");
        }
    });
});

JSFiddle 是:here

-谢谢。

最佳答案

您需要在要拖动的对象上启用droppable,并在其中使用revert

像这样:

$(".draggable2").droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function (event, ui) {
        ui.draggable.draggable('option', 'revert', true);
    }
});

查看此fiddle演示

另请参阅此 SO问题

关于jQuery UI - 将 jQuery 可拖动对象恢复为其原始状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18105069/

相关文章:

jquery - head.js 和响应式网页设计

javascript - 单击 div 后将内容推送到 div 的隐藏输入

javascript - 对从 jQuery ui 自动完成选项列表中选择的选项执行函数

jquery-ui - css3.0 - 内容属性

jquery - 使用 ajax 刷新 View MVC C# 上的模型

javascript - 经常更新 div 的内容

javascript - 使用JS更改段落文本

javascript - JQuery UI 拖入可排序不滚动

javascript - 满足条件后如何重置时间

javascript - 仅当可拖动容器溢出时,jquery ui 拖放元素在拖动到 droppables 时被切断