代码之家 › 专栏 › 技术社区 › GNETO DOMINIQUE

如何使可拖动元素重新映射到同一位置

draggable html javascript

GNETO DOMINIQUE · 技术社区 · 7 年前

如何使可拖动的元素在拖动后仍显示在其源框上?

下面的脚本对此进行了说明:

function dragStart(ev) {
  ev.dataTransfer.setData('text1', ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData('text1');
  ev.target.appendChild(document.getElementById(data));
}

function allowDrop(ev) {
  ev.preventDefault();
}

.boxarticle {
  width: 200px;
  height: 150px;
  border: 1px solid blue;
  margin: 0 0 10px 20
}

div#panier {
  width: 150px;
  height: 150px;
  background-color: ;
  border: 1px solid blue;
}

<!-- I want that image to remain here after I dragged it -->
<div class='boxarticle'>
  <img src="https://cdn-images-1.medium.com/max/1200/1*QQvzwKk7rdC1JkY0XiPVUQ.png" draggable="true" id='image' data-price='9200' ondragstart="dragStart(event)" width=80 height=80>
</div>

<!-- where draggable element go in -->
<div id="panier" ondrop='drop(event)' ondragover="allowDrop(event)"> Drag and drop image here..but leave it in the source place </div>

1 回复 | 直到 7 年前

Devan Buggay 7 年前

您需要克隆它并给它一个新id,否则它将假定为“拖动”。

HTML5 drag and copy?

function dragStart(ev)
{
  ev.dataTransfer.setData('text1',ev.target.id); 
}

function drop(ev)
{
  ev.preventDefault();
  var data=ev.dataTransfer.getData("text1");
  var nodeCopy = document.getElementById(data).cloneNode(true);
  nodeCopy.id = "randomId";
  ev.target.appendChild(nodeCopy);
}

function allowDrop(ev)
{
  ev.preventDefault();
}

.boxarticle { 
     width:200px;height: 150px; border:1px solid blue;margin: 0 0             10px 20
 }

div#panier {
     width:150px;height: 150px;background-color: ; border: 1px        solid blue;
}

<!-- I want that image to remain here after I dragged it -->
<div class='boxarticle'>
  <img src="https://cdn-images-1.medium.com/max/1200/1*QQvzwKk7rdC1JkY0XiPVUQ.png" draggable="true" id='image'  data-price='9200' ondragstart="dragStart(event)" width=80 height=80>
 </div>

<!-- where draggable element go in -->
<div id="panier" ondrop='drop(event)' ondragover="allowDrop(event)"> Drag and drop image here..but leave it in the source place </div>

推荐文章

Richard Tinkler · 如何在表单中拖放HTML列表项并更改其隐藏的输入字段值

6 年前

Can74 · 为什么我的代码不起作用?

6 年前

GNETO DOMINIQUE · 如何使可拖动元素重新映射到同一位置

7 年前

David · 是否将自定义本地属性添加到控件?

7 年前

Vaxo Basilidze · jQuery UI可拖动和可拖放项变为不可拖动

7 年前

cbryant678 · 如何仅使用可拖放jQuery从克隆中删除类?

7 年前

John Wellson · 将“dragstart”事件附加到“mouseup”以获得可拖动体验

7 年前

KPM · 使用Jquery Issue垂直重新排序Div

8 年前

Twiggit · 可排序和序列化

8 年前

Sharpy · 拖放某物

8 年前