將div拖入表格並獲取單元格的編號

我試圖提醒表格單元格的id，我將其拖入某個表格。我已經拼湊了各種各樣的例子，雖然我覺得我很接近，但我並不在那裏。任何指針感激地收到謝謝！將div拖入表格並獲取單元格的編號

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Draggable - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
    <style> 
    #draggable { width: 150px; height: 150px; padding: 0.5em; } 
    </style> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 

    $('.drop').droppable({ 
     accept: ".nodrop", 
     tolerance: "pointer", 
     snap: ".drop", 


    } 
    drop: function (event, ui) { 
      var parenttd = $(ui.draggable).closest('td').attr('id'); 

alert("parenttd=" + parenttd); 

); 
    </script> 
</head> 
<body> 

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me around</p> 
</div> 

<br /><br /> 
<table style="width:600px;" border="1" cellspacing="0"> 
    <tr> 
    <td id="1" align="middle"><h1>1</h1></td> 
    <td id="2" align="middle"><h1>2</h1></td> 
    </tr> 
    <tr> 
    <td id="3" align="middle"><h1>3</h1></td> 
    <td id="4" align="middle"><h1>4</h1></td> 
    </tr> 
</table> 

</body> 
</html>

來源

2014-10-06 Ed Mozley

添加[的jsfiddle（http://jsfiddle.net），請 – Fabio 2014-10-06 15:28:39

添加小提琴請。 – ajmajmajma 2014-10-06 15:29:01

或者一個堆棧片段：http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ – 2014-10-06 17:38:02

首先，你的js代碼有很多錯誤。

這裏是很好的解釋：http://jqueryui.com/droppable/

這將是你的問題的解決方案。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Draggable - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
    <style> 
    #draggable { width: 150px; height: 150px; padding: 0.5em; } 
    #droppable td{ width: 200px; height: 200px; padding: 0.5em; } 
    </style> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 

    $('#droppable td').droppable({ 
     drop: function (event, ui) { 
      var parenttd = $(this).attr('id'); 
      alert("parenttd=" + parenttd); 
     } 

    }) 
}); 


    </script> 
</head> 
<body> 

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me around</p> 
</div> 

<br /><br /> 
<table id="droppable" border="1" cellspacing="0"> 
    <tr> 
    <td id="1" align="middle"><h1>1</h1></td> 
    <td id="2" align="middle"><h1>2</h1></td> 
    </tr> 
    <tr> 
    <td id="3" align="middle"><h1>3</h1></td> 
    <td id="4" align="middle"><h1>4</h1></td> 
    </tr> 
</table> 

</body> 
</html>

來源

2014-10-06 15:39:59 jorgeromero

謝謝你 - 但是當我把div放入單元格時，它會警告表格的ID而不是單元格。 – 2014-10-07 08:39:58

我會看看jsfiddle - 我沒有用過這個，然後回來，一旦我做完了 – 2014-10-07 08:40:26

哦，對不起，我知道你想要表格的id，而不是單元格。在這種情況下，你只需要改變該行： ...... $（ '＃可放開TD'）可放開（{ ....... :) – jorgeromero 2014-10-07 09:20:08

將div拖入表格並獲取單元格的編號

回答

相關問題