取消jquery可拖动对象或重置

Question

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

你可以看到上一个问题中的代码

jQuery UI droppables - 更改已删除的图像

Answer 1

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

1. 跟踪使用拖动元素的原始位置.data()和.drop()你的活动droppable对象:

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

   基本上这只是在拖动元素上设置称为"originalPosition"的数据.这假设您可以继续在有效放置区域内拖动元素(因此在继续拖动后它不会覆盖原始位置).

2. 创建一个您调用的函数,将拖动的对象设置为原始位置的动画:

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

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

3. 从事件处理程序调用该函数:

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

这是一个有效的例子:http://jsfiddle.net/v7N6w/