基于data-id的jquery拖放操作
我是新手来拖放功能。基于data-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>
我想实现像每当我拖放图像,以时间全表必须要加入到下面的div
我有多个表,它会像整个表一样工作将会拖入div.But图像亩不能从地方移除。只有其内容需要克隆或类似。
现在我正在低于error.But不知道为什么它显示我的错误。
TypeError: data.html is not a function
我该如何做到这一点? 任何想法?有什么建议么 ?
在这里,你去了一个解决方案https://jsfiddle.net/ed5bmth2/1/
allowDrop = function(ev) {
ev.preventDefault();
}
drag = function(ev) {
var DataId = ev.target.parentNode.getAttribute('data-id');
var selected_table =$("#rows .sim-row[data-id='"+DataId+"']");
ev.dataTransfer.setData("text",DataId);
}
drop = function(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
#content {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="https://www.w3schools.com/html/img_logo.gif" alt="title">Title
</div>
希望这会帮助你。
感谢您的回复。我看到上面的小提琴也工作正常。 但我有左侧面板内的图像和div在右侧。 所以,每当我试图拖动图像时,它是更改网址,但不可拖动。 所以请为我指导 –
你可以为我创建一个jsFiddle,这样我可以帮助你更胖。 – Shiladitya
是的,给我几分钟 –
在这里,我想实现像img将被拖入内容div但img标签一定不需要删除 –