将一行从 jquery 数据表拖到无序列表

如何解决将一行从 jquery 数据表拖到无序列表

我正在尝试将一行从数据表拖到 li 或 ul 元素。 例如

行中具有 draggable 和 ondragstart 属性，例如

<tr class="even" role="row" style="height: 22px;" draggable="true" ondragstart="drag(event)" }="">
    <td class="sorting_1" style="display: none;">
        <input name="item.ID" id="item_ID" type="hidden" value="30">
    </td>
    <td> Menu Structure </td>
    <td> IdentityComponent </td> ..etc                          
</tr>

UL 中的标记，允许它作为删除的目标：

<li>
<span class="accordion-heading" aria-expanded="false" data-toggle="collapse" data-target="#MMID_0">
    <input name="MM_0" class="mmTree-cnode hidden" id="MM_0" type="input"  iid="FkComponentId=ComponentId=29 |"/> &nbsp; 
<span class="glyphicon glyphicon-plus"></span> &nbsp;
<span class="componentName" ondragover="allowDrop(event)" ondrop="drop(event)"> &nbsp;  
       Administration
</span>
</span>
<ul>
    <li>..blah blah<li/>
    <li>..blah blah<li/>
</ul>

看起来拖动部分可以正常工作，但是在放置时我收到此错误，在这一行重新设置了“数据”参数（在放置函数中）。 （数据=“”）。可能是 'dataType as text 不正确？？

ev.target.appendChild(document.getElementById(data));

Unhandled exception at line 1923,column 3 in http://localhost:60667/IdentityComponentPermission/List
0x80070057 - JavaScript runtime error: Invalid argument.

谢谢

解决方法

拖动功能从 W3 学校示例更改为

function drag(ev)
{
    ev.dataTransfer.setData("text",ev.target.innerText);

    console.log("Target  innerText = " + ev.target.innerText);
    console.log("Cells innerHTML for the ID = " + ev.target.cells[0].innerHTML);
    console.log("Target  innerHTML = " +ev.target.innerHTML);
}

然后下降到

var srcData = ev.dataTransfer.getData('text');

// srcData 现在具有值 'Countries Country List' ，即innerText

// 传递 ev.target.cells[0].innerHTML，给我

<input name="item.ID" id="item_ID" type="hidden" value="33">

// 传递 ev.target.innerHTML，给我整行的标记

从这里开始提取我想要的内容，或者将整行的单元格迭代到一个数组中（可能在表单范围变量中）并在 drop 函数中检索它并附加我想要的内容到UL 或 Li。