Перетащите элементы в div, и у вас есть возможность вернуться в исходное положение

Question

Как описано, я хочу, чтобы иметь возможность перетаскивать некоторые div из своего меню, которое у меня есть, и иметь возможность отбросить их до определенного div. . я сумел сделать вид его после этого ..

http://jsfiddle.net/bysnc/

однако, я хочу, чтобы добавить кнопку «X» на каждом из них, так что OnClick кнопки «х» перетаскиваемые/сбрасываемой элемент возвращается (возвращается) в исходное положение.

Я нашел это

http://jsfiddle.net/v7n6w/

, который, казалось, вроде того, что я хотел (на самом деле я хочу уникальную кнопку для каждого, а не в целом один .. но 1) это не похоже, упал даже на jsfiddle 2) на мой тест, я получаю сообщение об ошибке в консоли «неперехваченным TypeError: не удается прочитать свойство„originalPosition“неопределенных»

и, в частности ошибка получает в этой строке ui.draggable.data («перетаскивание») originalPosition);.

здесь является частью JS ..

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

$(document).ready(function() { 
    $("#drag").draggable({ 
     revert: "invalid" 
    }); 

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

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

}); 

и мой HTML выглядит следующим образом

сбрасываемой позиции я хочу, чтобы иметь возможность быть удалены только в обув

<div id="container"> 
    <div id="floor">foo</div> 
    <div id="other">bar</div> 
</div> 

и начальное положение

<div class="menu" id="power" width="300"> 
<div class="options ui-widget-content" id="drag"><img src="1.jpg"/></div> 
    <div class="options ui-widget-content" id="drag2"><img src="2.jpg"/></div> 
</div> 

стр. может ли это быть только с jquery, а не с плагином jquery.ui?

Answer 1

Смешанный код из 2-х образцов

$('#floor').droppable({ 
    tolerance: 'fit' 
}); 

$('.draggable-div').draggable({ 
    revert: 'invalid', 
    stop: function(){ 
     $(this).draggable('option','revert','invalid'); 
     $(this).find('.undo').show(); 
    } 
}); 

$('.draggable-div').find('.undo').click(function(i, e) { 
    var $div = $(this).parent(); 
    revertDraggable($div); 
}); 

$('#floor').droppable({ 
    greedy: true, 
    tolerance: 'touch', 
    drop: function(event,ui){ 
     // ui.draggable.draggable('option','revert',true); 
     if (!ui.draggable.data("originalPosition")) { 
     ui.draggable.data("originalPosition", 
          ui.draggable.data("draggable").originalPosition); 

     } 


     $(this).find('.undo').show(); 
    } 
}); 

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

    $selector.find('.undo').hide(); 
} 

Посмотреть полный код здесь:

http://jsfiddle.net/d9BVF/2/ 

Он работает в настоящее время