Javascript - 拖动和克隆 Javascript答案

【问题标题】：Javascript - Drag and clone JavascriptJavascript - 拖动和克隆 Javascript
【发布时间】：2017-08-16 19:56:27
【问题描述】：

对不起，我是一个新手...希望单击图片并将其拖到另一个 div 中，但将原始图片保持在相同的位置和状态。我尝试过，但失败了！提前感谢您的帮助。

      <div id="#user3profile" >
          <img src="pic/user3.png" class="userprofilepic" id="userprofile3" width="88" height="70">
      </div>

      <script>
           $(".userprofilepic").draggable({ helper: 'clone'});
      </script>

【问题讨论】：

标签： javascript jquery clone draggable

【解决方案1】：

我正在使用 jquery UI api 来解决拖放问题。看看我的例子，改变你想要的样式 html。

HTML

<br><br>

<table class="original" id="diagram">
    <tbody id="sortable2">
   <tr class="new-item"> 
       <td><img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney" /></td>
   </tr>
    </tbody>
</table>


<br><br>

<table class="clone" id="diagram1" >
    <tbody id="clonetable">

     </tbody>
</table>

 <br><br>

CSS

table{
    border: 1px solid black;
    width:200px;
}

.original tbody tr.test2 td {
    background: rgba(20, 111, 186, 0.38);
}

img {
  width:200px;
  height:auto;
}

Javascript

$("#clonetable").sortable({
    revert: true,
    stop: function(event, ui) {
    }
});
$(".new-item").draggable({
    connectToSortable: "#clonetable",
    helper: "clone",
    revert: "invalid",
    zIndex: 10000
});

FULL DEMO

【讨论】：

非常感谢......你的明星......你用的很棒的照片！哈哈哈迪斯尼迷？

【解决方案2】：

从 div id 中删除 #，修改 .到 # 来自 jQuery 代码。

【讨论】：

嗨康俊赫 :)，谢谢！ :) 大脑半睡半醒，克隆部分仍然无法工作:(
@stevenpjm 仔细检查 - 它应该可以工作。一次又一次地检查它。还可以尝试查看控制台窗口是否有任何错误。制作一个简单的演示，看看它独立工作。这就是所谓的分而治之。您最初的错误几乎是难以置信。所以很容易继续相信你在其他地方仍然有问题
@stevenpjm 试试这个jsfiddle.net/z6j0s9nx 这不是你想要的吗？您可以拖动 img 的克隆图像（不确定是要拖动 div 还是 img，但从您的代码中它是 img）。