可棄，並在表TD可拖動

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 


<div class="drag" style="height: 80px; width: 30px; background-color: red"></div> 
<div class="drag" style="height: 30px; width: 30px; background-color: green"></div> 
<div class="drag" style="height: 120px; width: 30px; background-color: blue"></div> 

<table id="droppable" border="1"> 
    <tr> <td>a1</td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr> <td>a2</td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr> <td>a3</td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr> <td>a4</td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr> <td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr> <td></td><td></td><td></td><td></td><td></td><td></td></tr> 
</table> 

$(function() { 
    $(".drag").draggable(); 
    $("#droppable td").droppable({ 
     drop: function(event, ui) { 
      console.log($(this)); 
     } 
    }); 
});

請拿到第一個div - 綠色和TD A1下降開始。 console.log顯示<td class="ui-droppable">a1</td>。還行吧。可棄，並在表TD可拖動

請獲取第二格 - 紅色並下降開始上TD a1。 console.log show <td class="ui-droppable">a2</td>這很糟糕。應該<td class="ui-droppable">a1</td>

並請獲得第三格 - 藍色和TD A1下降開始;執行console.log顯示 <td class="ui-droppable">a3</td>這是不好的。應該<td class="ui-droppable">a1</td>

我該怎麼做，顯示我A1始終如果我在A1下降開始？

http://jsfiddle.net/RuC8t/1/

來源

2012-11-06 Berg Swoots

應該是http://jsfiddle.net/RuC8t/2 /對嗎？我不能編輯它，因爲它認爲編輯太小。 – targumon

這仍然是不好的 –

我做了2個變化：

在HTML我更換了DIV（ '開始'）的與此有關的內容：

<span class="dragHandle" style="position: fixed">start</span>

在JS我換成你

$(".drag").draggable();

與此：

$(".dragHandle").draggable({ 
     drag: function (event, ui) { 
      $(this).parent().offset({ top: ui.offset.top, left: ui.offset.left}); 
     } 
    });

這樣，它只是在頂部的把手是被丟棄（而不是高大的DIV的中心），我們仍然將您的多彩的DIV :-)

來源

2012-11-06 13:22:22 targumon

可棄，並在表TD可拖動

回答

相關問題