Javascript 基于数据id的Jquery拖放

我是拖放功能的新手

Jquery：

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    var DataId = ev.target.parentNode.getAttribute('data-id');
    alert("Data Id : "+DataId);
    var selected_table =$("#rows .sim-row[data-id='"+DataId+"']");
    //var main_table = selected_table.parentNode;
    alert("Data Id : "+selected_table.html());
    ev.dataTransfer.setData("text",selected_table);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    alert("Data Id : "+data.html());
    ev.target.appendChild(data.clone());
}

HTML代码：

<div id="content" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

<div id="rows">
    <table class="sim-row" data-id="1001" id="1001">
        <tr>
            <td class="sim-row-header1 sim-row-edit width100" data-type="title">Main Title</td>                         
        </tr>
     </table>
</div>  

<div class="buttons"  data-id="1001" id="1001" draggable="true" ondragstart="drag(event)" ondrop="drop(event)">
            <img id="image"src="<?php echo base_url()?>assets/invoice/preview/1001.png" alt="title">Title
        </div>

我怎样才能做到这一点？

---

有什么想法吗？有什么建议吗？

给你一个解决方案

allowDrop=功能（ev）{
ev.preventDefault（）；
}
阻力=功能（ev）{
var DataId=ev.target.parentNode.getAttribute（'data-id'）；
var selected_table=$（“#rows.sim row[data id='”+DataId+“']”）；
ev.dataTransfer.setData（“文本”，数据ID）；
}
下降=功能（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}

#内容{
高度：100px；
}

主标题
标题

在这里，我想实现类似img的功能，它将被拖到content div中，但img标签不需要移除。谢谢回复。我看到上面的小提琴也很好用。但我有一个图像在左面板内，div在右侧。所以，每当我试图拖动图像的时候，它是改变网址，但不能拖动。所以请指导我，你能为我创建一个JSFIDLE吗，这样我就能帮助你了。是的，当然，给我几分钟时间谢谢，可能是jquery没有加载，或者可能是任何其他问题，这就是为什么它以前不工作的原因。现在它工作得很好。我还需要你的帮助。无论什么时候我拖动图像都是不可能的，但不能拖动图像。需要拖动的不是那个表。@AnkitDoshi。这是您的解决方案。请更新问题，如果您满意，请接受并投票回答。

TypeError: data.html is not a function