仅使用javascript的HTML5拖放
[英]HTML5 drag and drop with only javascript
问题描述
All, 
所有，
I'm trying to use event delegation, drag and drop and only javascript. 我正在尝试使用事件委托，拖放和仅JavaScript。
After I double click on item 1 from sourceContainer....the item then gets created in the destinationContainer. 在双击sourceContainer的项目1之后。...然后在destinationContainer中创建该项目。 No problem here. 没问题
However, when I try to drag the new item in the destinationContainer I can't set the top and left styles for the selected div. 但是，当我尝试将新项目拖到destinationContainer中时，无法为所选div设置顶部和左侧样式。 Either the event.target.id or the this.id is always the same. event.target.id或this.id始终相同。 I expect the id to be 1 which is the newly created id for the div that exists in destinationContainer. 我希望id为1，这是destinationContainer中存在的div的新创建的id。
Can anyone help me understand how I might be able to change the top and left style for only the div that was created in destinationContainer. 谁能帮助我了解我如何才能仅更改在destinationContainer中创建的div的顶部和左侧样式。
Here is a fiddle: https://jsfiddle.net/mdevera/oys3tLww/1/ 这是一个小提琴： https : //jsfiddle.net/mdevera/oys3tLww/1/
Here is the drop function: 这是放置函数：
function drop(event) {
console.log("event.target.id: " + event.target.id);
console.log("this.id: " + this.id);
// This does not allow me to set the selected div's appropriate top and left styles.
// I do not want the whole destinationContainer to not move. Just the selected child element.
// var offset = event.dataTransfer.getData("text/plain").split(',');
//
// this.style.top = (event.clientY + parseInt(offset[0], 10)) + 'px';
// this.style.left = (event.clientX + parseInt(offset[1], 10)) + 'px';
} }
3 个解决方案
解决方案1
0 已采纳 2017-01-17 07:03:27
/*Drag and Drop events*/
var source;
var before;
function isbefore(a, b) {
if (a.parentNode == b.parentNode) {
for (var cur = a; cur; cur = cur.previousSibling) {
if (cur === b) {
return true;
}
}
}
return false;
}
function dragenter(e) {
before =isbefore(source, e.target);
if (before) {
e.target.parentNode.insertBefore(source, e.target);
} else {
e.target.parentNode.insertBefore(source, e.target.nextSibling);
}
}
function dragstart(e) {
source = e.target;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", source.getAttribute('id'));
return true;
}
function dragDrop(e) {
var source = e.dataTransfer.getData("Text");
if (!before) {
ev.target.appendChild(document.getElementById(src));
}
ev.stopPropagation();
return false;
}
解决方案2
0 2017-01-17 07:06:49
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle"
type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Border-style
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#" id="border-solid" onClick="return_id(this.id)">Solid</a></li>
<li><a href="#" id="border-dashed" onClick="return_id(this.id)">Dashed</a></li>
<li><a href="#" id="border-dotted" onClick="return_id(this.id)">dotted</a></li>
</ul>
</div>
<center><input type="text" id="text1" onClick="ele_id(event)"/></center>
<center><input type="text" id="text2" onClick="ele_id(event)"/></center>
<center><input type="text" id="text5" onClick="ele_id(event)"/></center>
解决方案3
0 2017-01-17 08:35:20
Purely in Javascript. 纯粹使用Javascript。 Main Point is to play with mouseup,mousedown and mousemove events to simulate drag and drop. 要点是玩mouseup，mousedown和mousemove事件来模拟拖放。 Play with offset to get desired offset from mouse cursor of drag object. 播放偏移以从拖动对象的鼠标光标获得所需的偏移。
Run code snippet in full page for better view. 在整页中运行代码段以获得更好的视图。 Scrolling is enemy of drag and drop 滚动是拖放的敌人
var elements=document.getElementsByClassName("item"); var dest=document.getElementById("dest"); var drag=false; var tempObj=null; //active object to drag //add events to item class for(obj of elements) { obj.addEventListener('mousedown',function dragInitiate() { drag=true; tempObj=this; }); } document.addEventListener('mouseup',function dragInitiate(e) { drag=false; if(tempObj!=null) { if(itemInsideDestination(tempObj,e)==true) { tempObj.innerHTML="Success!!!"; dest.appendChild(tempObj); tempObj.style.position="relative"; tempObj.style.left="0px"; tempObj.style.top="0px"; }else { tempObj.style.left="0px"; tempObj.style.top="0px"; } } }); document.addEventListener('mousemove',function dragStop(e) { if(drag==true && tempObj!=null) { //play with offset to get accurate position of item with mouse cursor var offset=100; tempObj.style.left=(e.clientX)+"px"; tempObj.style.top=(e.clientY-offset)+"px"; if(itemInsideDestination(tempObj,e)==true) { tempObj.innerHTML="I am inside Destination"; }else { tempObj.innerHTML="Do not Drop me!!!"; } } }); function itemInsideDestination(obj,e) { var mx=e.clientX,my=e.clientY; var itemRect=obj.getBoundingClientRect(); var destRect=dest.getBoundingClientRect(); if((itemRect.left+itemRect.width)>=destRect.left && (itemRect.left+itemRect.width)<=destRect.left+destRect.width) { if((itemRect.top)>=destRect.top && (itemRect.top)<=destRect.top+destRect.height) { //console.log('box inside'); return true; } } }
#source { border:1px solid gray; height:200px; width:200px; } #dest { border:1px solid gray; height:200px; width:400px; } .item { background-color:lightblue; width:200px; height:30px; position:relative; border:1px solid gray; cursor:move; } .inDest { background-color:lightblue; width:200px; height:30px; position:relative; border:1px solid gray; left:0px; top:0px; } .item:active { border:1px solid blue; }
<p>Source</p> <div id="source"> <div class="item">Item1</div> <div class="item">Item2</div> <div class="item">Item3</div> <div class="item">Item4</div> </div> <p>Destination</p> <div id="dest"> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.