Javascript - 拖动和克隆Javascript

时间:2017-03-24 01:41:43

标签: javascript jquery clone draggable

对不起,我是这个新手......想要点击图片并将其拖到另一个div中,但保持原始图片处于相同的位置和状态。 我有一个去,但失败了!在此先感谢您的帮助。

"r+"

2 个答案:

答案 0 :(得分:1)

从div id中删除#,修改。来自jQuery代码的#。

答案 1 :(得分: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