JQuery draggable droppable

Question

Я использую плагин jquery для перетаскивания изображения в div. Перетаскивание работает, но сброс - нет.

Изображения отображаются из java-скрипта после вызова ajax. Вот код:

$.ajax({ 
       url: urlBase + "/api/services/getserviceitems?servicetype=0", 
       context: document.body, 
       dataType: 'json', 
       async: true 
      }).done(function (data) { 
       console.log(data); 
       var html = "<table><tr>"; 
       var ctr = 0; 
       $.each(data, function (k, v) { 
        if (ctr < 3) { 
         html += "<td class='item'><img src='" + urlBase + "/file/getimage/" + v.FileId + "' style='width:120px; height:120px; padding:5px'><div style='font-size:12px; margin-left:5px; margin-top:-5px;'>$" + v.Price + ".00</div></td>" 
         ctr++; 
        } 
        else { 
         ctr = 0; 
         html += "<tr><td class='item' ><img class='item' src='" + urlBase + "/file/getimage/" + v.FileId + "' style='width:120px; height:120px; padding:5px'><div style='font-size:12px; margin-left:5px; margin-top:-5px;'>$" + v.Price + ".00</div></td></tr>" 
         ctr++; 
        } 
       html += "</tr></table>"; 
       $('#menuTabContent').html(html); 

       }); 
       enableDragDrop() 

Это мой код для моего перетаскивания.

function enableDragDrop() { 
      $('.item').draggable({ 
       revert: true, 
       proxy: 'clone', 
       onStartDrag: function() { 
        $(this).draggable('options').cursor = 'not-allowed'; 
        $(this).draggable('proxy').css('z-index', 10); 
       }, 
       onStopDrag: function() { 
        $(this).draggable('options').cursor = 'move'; 
       } 
      }); 

      $('.newRequestModalBody-Right').droppable({ 
       onDragEnter: function (e, source) { 
        alert("!!!!"); 
        $(source).draggable('options').cursor = 'auto'; 
       }, 
       onDragLeave: function (e, source) { 
        alert("!!!!"); 
        $(source).draggable('options').cursor = 'not-allowed'; 
       }, 
       onDrop: function (e, source) { 
        //var name = $(source).find('p:eq(0)').html(); 
        //var price = $(source).find('p:eq(1)').html(); 
        //addItem(name, parseFloat(price.split('$')[1])); 
        alert("!!!!"); 
       } 
      }); 
     } 

Диск, установленный в droppable, был создан нормально.

<div id ="requestDv"></div> 

Я создаю таблицу для requestDv в ​​JS:

function loadGuestRequestItems(){ 
     var html = ""; 

     html = "<p style='padding:10px;font-size:12px;'>Requests(Drag items here)</p>" 
     html += "<table style='font-size:12px;' class='table table-striped'>"; 
     html += " <tr>"; 
     html += "  <th>Type</th>"; 
     html += "  <th>Details</th>"; 
     html += " </tr>"; 
     html += "</table>"; 

     $('#requestDv').html(html); 
    } 

Другое дело, прокси-сервер: 'клон' не работает. Все изображение по-прежнему перетаскивает изображение с места. Заранее спасибо!

Answer 1

Другое дело, прокси: «клон» не работает.

он должен быть помощник: "клон" docs

revert: true 

С JQuery документ:

Boolean Если установлено значение истинно, элемент всегда будет возвращаться.

Так что вы хотите:

revert:"invalid"

Вот простой пример: http://jsfiddle.net/Rusln/8BY5e/