jquery - 取消 jquery 可拖动对象或重置

Question

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

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

jQuery UI droppables - changing the image that's dropped

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/