jQuery UI-将jQuery可拖动对象还原为原始对象吗? [英] jQuery UI - Revert a jQuery draggable object back to its original?

问题描述

在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是:此处

-谢谢.

解决方案

您需要在要拖动的对象上启用droppable，然后在其中使用revert.

赞:

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

有关演示，请参见 小提琴 >

也请参见此 SO 问题

In HTML file, I would like to drag one item and dropped to the target,suppose I would like to drop another item to the same position, at that time both items should be override.If both items are overrides the new item should be revert to original position.Can any one help me how to revert the new item to the original position. Here is my code.

$(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 is : here

-Thanks.

解决方案

You need to enable droppable on the objects you intend to drag and use revert there.

Like this:

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

See this fiddle for a demo

Also see this SO question

这篇关于jQuery UI-将jQuery可拖动对象还原为原始对象吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！