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

Question

我正在尝试将一行从数据表拖到 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>

看起来拖动部分有效，但在放下时我收到此错误，重新 'data' 参数（在 drop 函数中），在这一行。（数据=“”）。可能 '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.

谢谢

Answer 1

拖动功能从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 .

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

Drag a row from a jquery datatable to an unordered list

javascript

datatables

html-lists

drag

drop