JQuery可拖拽droppble

我正在使用jQuery的插件拖放圖像到div。拖動工作，但下降不是。JQuery可拖拽droppble

ajax調用後，圖像從java腳本顯示。這裏是代碼：

$.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是正常創建的。

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

另一件事，代理： '克隆' 不起作用。整個圖像仍然在拖拽圖像。先謝謝你！

來源

2013-06-25 ljpv14

的jsfiddle將是巨大的 – Muath

我不能因爲我從API – ljpv14

'加載圖像.newRequestModalBody-Right'是'table'還是什麼？你創建了'

'用於放棄，但它沒有droppable事件？（IM混淆） – Shaddow

另一件事，代理：'克隆'不起作用。

應該幫手：「克隆」 docs

revert: true

從jQuery的文檔：

布爾：如果設置爲true的元素會隨時恢復。

所以，你想：

revert:"invalid"

下面是一個簡單的例子：http://jsfiddle.net/Rusln/8BY5e/

來源

2013-06-25 12:34:15 rusln

JQuery可拖拽droppble

回答

相關問題