2008-11-12 2 views
0

На данный момент у меня есть набор div, сгенерированный динамически php и все имеющие свои идентификаторы, начинающиеся с 'itembox', с добавленным количеством отсчетов. У меня на странице есть область сбрасываемого мусорного ящика, чтобы пользователь мог удалить отдельную itembox с помощью fdragging и переместиться в корзину.jQuery droppable/draggable

Моя проблема в том, что droppable, похоже, не активируется, когда я перетаскиваю оригинал, пока он будет функционировать (отлично), когда у меня есть помощник: 'clone' set. К сожалению, однако, при перетаскивании функция клонирования берет свой клон с первой итерации itembox, независимо от того, какой itembox фактически тащит.

Итак, я ищу решение либо сделать droppable приемлемым, либо заставить функцию клонирования взять свой клон из itembox, который был перетащен.

ответ

1

Я предполагаю, что проблема должна лежать в опции accept вашего droppable initializer. Просто попробуйте следующее:

$('#mydroppable').droppable(
{ 
    accept: function() { return true; }, 
    drop: function() { alert("Dropped!"); } 
}); 

Теперь это будет принимать все, так что вы, вероятно, следует реализовать некоторую фильтрацию в функции принимаю, но тем не менее это не должно работать.

0

Вы также можете попробовать следующее решение.

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.srcfield').draggable({ 
     revert: true  
    }); 

    $('#trash').droppable({ 
     accept : ".srcfield", 
     over: function(){ 
      $(this).removeClass('out').addClass('over'); 
     },`enter code here` 
     out: function(){ 
      $(this).removeClass('over').addClass('out'); 
     }, 
     drop: function(ev, ui){ 
      //var answer = confirm('Delete this item?'); 
      var theTitle = $(ui.draggable).attr("title"); 
      $(this).html("<u>"+theTitle+"</u><br/> is deleted!"); 
     } 
    }); 
}); 
</script> 


<body> 
    <div id="trash" class="out"> 
      <span>Trash</span> 
    </div> 
    <div id="sourcefields"> 
      <div class="srcfield" title="First Name"><span>First Name</span></div> 
      <div class="srcfield" title="Last Name"><span>Last Name</span></div> 
      <div class="srcfield" title="Age"><span>Age</span></div> 
    </div> 
</body>