Fatal编程技术网
  • javascript/
  • Javascript 拖动原始元素HTML5拖放

Javascript 拖动原始元素HTML5拖放

javascript html

Javascript 拖动原始元素HTML5拖放,javascript,html,draggable,drag-and-drop,Javascript,Html,Draggable,Drag And Drop,我正在使用原生的HTML5API开发一个拖放界面。我们对其他部分使用了jquerydraggable，但是对于这个特定部分，它的性能很差，所以我们使用原始JavaScript 基本上，标记看起来像这样 <li draggable="true"> <div class="esia_img esia_amex"></div> <span class="esia_imgTitle flo">AmEx</span> </li>

我正在使用原生的HTML5API开发一个拖放界面。我们对其他部分使用了jquerydraggable，但是对于这个特定部分，它的性能很差，所以我们使用原始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>
它将我的类完美地应用于原始元素，但我似乎无法移动原始元素。浏览器创建“克隆/重影”图像…我看到了在使用“SetDragage”拖动时可以在何处创建自己的图像以显示，但如何拖动用户正在拖动的实际元素？

（这不是一个真正的答案，但对于注释来说太长了）

。将克隆图像，然后拖动克隆

我不太清楚你这是什么意思。我只是在我链接的页面上复制/粘贴了这个例子，没有发生类似的事情。没有任何元素的复制或克隆。也许你不确定孩子的行动？示例代码只是创建一个div，后跟一个图像。您可以将图像拖放到div上。这将导致img标记现在包含在div中，而不是像加载时那样重新移动它。我还要注意，因为他们的目标div（divid='div1'）没有内容，所以它没有高度。您应该向div添加一些文本以使其可见。然后，在拖放时观察javascript调试器中的html元素。页面上只有一个图像，它只是在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>


功能allowDrop（ev）
{
ev.preventDefault（）；
}
功能阻力（ev）
{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）
{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
id='Div1'-下降目标
id='Div2'-下降目标
拖我
在回答1的注释中提供了额外的信息之后，实现这一点的方法（据我所知）是放弃html本机拖放支持，而不是自己实现它

我忘记了是什么原因导致了旧浏览器（特别是IE）出现问题，尽管我感觉可能是OnTgMouseDown的事件变量或clientX/scrollLeft

在任何情况下，下面的代码都使用当前的Chrome和IE9进行测试

希望它适合您的目的（它可以直观地定位对象，但不会改变节点在DOM树中的位置）


#tgt
{
位置：绝对位置；
边框：实心1px红色；
文本对齐：居中；
显示：内联块；
}
函数byId（e）{returndocument.getElementById（e）；}
函数myInit（）
{
var dragMe=byId（'tgt'）；
dragMe.ondragstart=函数（）{return false；}
dragMe.onmousedown=onTgtMouseDown；
}
函数onTgtMouseDown（e）
{
var mDlg，self=此；
变量initMx，intMy，initDlgX，initDlgY，dx，dy；
var-mTgt；
mTgt=这个；
//mDlg=this.parentNode；
//mDlg.zIndex=1000；
//mDlg.style.position='绝对'；
mTgt.zIndex=1000；
mTgt.style.position='绝对'；
e=e | |事件；
initMx=e.pageX；
initMy=e.pageY；
initDlgX=mTgt.offsetLeft；
initDlgY=mTgt.offsetTop；
//按下按钮时从元素左上角到鼠标的偏移
dx=initMx-initDlgX；
dy=initMy-initDlgY；
document.onmousemove=函数（e）
{
e=e | |事件；
固定页xy（e）；
mTgt.style.left=e.pageX-dx+'px'；
mTgt.style.top=e.pageY-dy+'px'；
}
this.onmouseup=函数（）
{
document.onmousemove=null；
}
}
//e=事件
函数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
}
}
拖我
这有帮助吗@enhzflep了解当您拖动徽标时，您如何不拖动原始图像…图像将被克隆，您将拖动克隆。我想拖动原始图像，而不仅仅是克隆图像。我发现拖放没有用，而是使用标准javascript，我认为你走错了方向。使用脚本而不是内置的DND有什么问题？可能克隆是一个不正确的术语……在jQuery Dragable中，您可以拖动使其可拖动的实际元素。如果需要，您可以拥有一个帮助器，但如果不设置帮助器，则移动实际元素。使用本机拖放，浏览器将显示重影图像，而原始元素保持在相同位置。我想移动可拖动的元素，而不是鬼影版本。 
<!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>

<!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>