Question

我想加载一个可以拖动到map / div的对象页面，但是想要一个清除/撤消按钮？这有可能用jquery吗？

您可以在上一个问题中看到代码

jQuery UI droppables - changing the image that's dropped

Answer 1

这可以通过简单调用.animate()（毕竟，jQueryUI都在做）和一些逻辑来跟踪你正在拖动的元素的原始位置（jQueryUI已经部分处理你）。

使用.data()和.drop()对象的droppable事件跟踪可拖动元素的原始位置：
```
$("#drop").droppable({
    drop: function(event, ui) {
        if (!ui.draggable.data("originalPosition")) {
            ui.draggable.data("originalPosition",
                ui.draggable.data("draggable").originalPosition);
        }
    }
});
```
基本上这只是在拖动的元素上设置名为“originalPosition”的数据。这假设您可以继续在有效放置区域内拖动元素（因此在您继续拖动后它不会覆盖原始位置）。

创建一个您调用的函数，将拖动的对象设置回原来的位置：

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);
            });
        }
    });
}

根据自己的喜好调整动画的速度。

从事件处理程序中调用该函数：

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

以下是一个有效的例子：http://jsfiddle.net/v7N6w/

取消jquery可拖动对象或重置

1 个答案: