基于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

我该如何做到这一点？任何想法？有什么建议么？

来源

2017-08-28 Ankit Doshi

在这里，我想实现像img将被拖入内容div但img标签一定不需要删除 –

在这里，你去了一个解决方案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>

希望这会帮助你。

来源

2017-08-28 09:07:14 Shiladitya

感谢您的回复。我看到上面的小提琴也工作正常。但我有左侧面板内的图像和div在右侧。所以，每当我试图拖动图像时，它是更改网址，但不可拖动。所以请为我指导 –

你可以为我创建一个jsFiddle，这样我可以帮助你更胖。 – Shiladitya

是的，给我几分钟 –

基于data-id的jquery拖放操作

回答

相关问题