如何使表格中的元素可拖动?

时间:2013-09-26 12:48:29

标签: javascript jquery html

我有一些可拖动的元素

你可以在这里查看 - *http://jsfiddle.net/Mf6zJ/269/*

现在,当我将这些可拖动元素放在表格中时,这些元素无法拖动。

请点击此处 - *http://jsfiddle.net/Mf6zJ/271/*

当用户从中拖动任何元素时,我想检查此元素的位置

所以请建议我这样做。

2 个答案:

答案 0 :(得分:3)

html

   <pre>
    <div id="info">Waiting for update</div>
    </pre>

    <ul id="test-list">
        <li id="listItem_1"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 1 </strong></li>
      <li id="listItem_2"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 2</strong></li>
      <li id="listItem_3"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 3</strong></li>
        <li id="listItem_4"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 4</strong></li>
    </ul>

的CSS:

ul{
  list-style: none;
}

li{
  display: inline;
}

demo

答案 1 :(得分:0)

您的HTML格式不正确。你的代码,尝试这样排列:

<pre>
<div id="info">Waiting for update</div>
</pre>
<table>
    <tr><td>
<ul id="test-list">
    <li id="listItem_1"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 1 </strong></li>
  <li id="listItem_2"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 2</strong></li>
  <li id="listItem_3"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 3</strong></li>
    <li id="listItem_4"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 4</strong></li>
</ul>
    </td></tr>
</table>

请参阅此DEMO