拖動原始元素HTML5拖放
[英]Drag original element HTML5 drag and drop
問題描述
我正在使用本地拖放html5 api的拖放界面。 我們已經將jQuery draggable用於其他部分，但它對於這個特定的部分表現不佳，所以我們使用原始JavaScript。
基本上標記看起來像這樣......
<li draggable="true">
<div class="esia_img esia_amex"></div>
<span class="esia_imgTitle flo">AmEx</span>
</li>
<li draggable="true">
<div class="esia_img esia_visamc"></div>
<span class="esia_imgTitle flo">VisaMC</span>
</li>
我為'dragstart'創建了一個addEventListener並運行以下函數
function dragStart (e) {
var t = this;
n(t).addClass('rot_15');
e.dataTransfer.effectAllowed = 'move';
}
它將我的類完美地應用於原始元素，但我似乎無法移動原始元素。 瀏覽器創建一個'克隆/鬼'圖像......我看到你可以在使用'setDragImage'拖動時創建自己的圖像，但是如何拖動用戶拖動的實際元素？
2 個解決方案
解決方案1
0 2012-09-26 21:32:00
（不是真正的答案，但評論太久了）
。圖像被克隆並拖動克隆。
不太清楚你的意思。 我只是在我鏈接的頁面上復制/粘貼了這個例子 - 沒有任何類似的事情發生。 沒有重復或克隆任何元素。 也許你不確定appendChild的行為？ 示例代碼只創建一個div，后跟一個圖像。 你可以將圖像拖放到div上。 這導致img標簽現在包含在div中，而不是代表它，就像它加載時的情況一樣。 我還要注意，因為他們的目標div（div id ='div1'）沒有內容，所以它沒有高度。 您應該向div添加一些文本以使其可見。 然后，在拖放時查看javascript調試器中的html元素。 頁面上只有1個圖像，它只是在DOM樹中重新定位。 :)
在這里，復制/粘貼並在調試器中觀察它。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
id='Div1' - Drop Target
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
id='Div2' - Drop Target
</div>
<!--
<img id="drag1" src="img/logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
-->
<h1 id='drag1' draggable='true' ondragstart='drag(event)'>Drag me</h1>
</body>
</html>
解決方案2
0 2012-09-28 23:19:07
根據評論中提供的額外信息來回答1，我所知道的方法是放棄html原生拖放支持，而不是自己實現它。
我忘記了導致老瀏覽器（特別是IE）出現問題的原因，盡管我感覺它是onTgtMouseDown的事件變量或者是clientX / scrollLeft。
在任何情況下，下面的代碼都使用當前的Chrome和IE9進行測試。
希望它適合您的目的（它可視地定位對象，但不會改變節點在DOM樹中的位置）
<!DOCTYPE html>
<html>
<head>
<style>
#tgt
{
position: absolute;
border: solid 1px red;
text-align: center;
display: inline-block;
}
</style>
<script>
function byId(e){return document.getElementById(e);}
function myInit()
{
var dragMe = byId('tgt');
dragMe.ondragstart = function() { return false; }
dragMe.onmousedown = onTgtMouseDown;
}
function onTgtMouseDown(e)
{
var mDlg, self=this;
var initMx, intMy, initDlgX, initDlgY, dx, dy;
var mTgt;
mTgt = this;
// mDlg = this.parentNode;
// mDlg.zIndex = 1000;
// mDlg.style.position = 'absolute';
mTgt.zIndex = 1000;
mTgt.style.position = 'absolute';
e = e || event;
initMx = e.pageX;
initMy = e.pageY;
initDlgX = mTgt.offsetLeft;
initDlgY = mTgt.offsetTop;
// offset from top left of element to mouse when button pressed
dx = initMx - initDlgX;
dy = initMy - initDlgY;
document.onmousemove = function(e)
{
e = e || event;
fixPageXY(e);
mTgt.style.left = e.pageX-dx+'px';
mTgt.style.top = e.pageY-dy+'px';
}
this.onmouseup = function()
{
document.onmousemove = null;
}
}
// e = event
function fixPageXY(e)
{
if (e.pageX == null && e.clientX != null )
{
var html = document.documentElement
var body = document.body
e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0)
e.pageX -= html.clientLeft || 0
e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0)
e.pageY -= html.clientTop || 0
}
}
</script>
</head>
<body onload='myInit();'>
<div id='tgt'>Drag Me</div>
</body>
</html>
拖放HTML5元素和JavaScript問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.