Question

我是新手拖放功能。

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 CODE：

<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图像不能从地方删除。只需要克隆或类似的内容。

现在我的误差低于此。但不确定为什么它会向我显示该错误。

TypeError: data.html is not a function

我怎样才能实现这一目标？有任何想法吗？有什么建议吗？

Answer 1

您可以使用解决方案https://jsfiddle.net/ed5bmth2/1/

＆＃13;

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));
}

＆＃13;

#content {
  height: 100px;
}

＆＃13;

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

＆＃13;

希望这会对你有所帮助。

基于data-id的Jquery拖放

1 个答案: