拖动原始元素HTML5拖放
我正在使用本机拖放html5 api开发拖放界面。我们已经在其他部分使用了jQuery拖动，但是它在这个特定部分的表现很差，所以我们使用原始的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的注释中提供了额外的信息之后，实现这一点的方法（据我所知）是放弃html本机拖放支持，而不是自己实现它。
我忘记了是什么原因导致了旧浏览器（特别是IE）出现问题，尽管我感觉可能是OnTgMouseDown的事件变量或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>
（不是一个真正的答案，但太长的评论）
。将克隆图像，然后拖动克隆。
我不太清楚你这是什么意思。我只是在我链接的页面上复制/粘贴了这个例子，没有发生类似的事情。没有任何元素的复制或克隆。也许你不确定孩子的行动？示例代码只是创建一个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>
-
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Tex
-
如何在拖动时更改可拖动元素的文本，我有来自cdk/拖放库的代码片段。它为在拖动时捕捉事件提供参数。我可以通过本机元素进行更改，但它会更改所有样式，而且我还需要在dragover或其他操作上设置另一个事件。如果要在拖动元素上放置随机文本，有哪些选项？ 在Html 在TS
-
我正在玩cdk拖放功能，因为我需要它来创建一个用于工作的POC。我从文档网站开始使用这段代码。我看到每次我把一个元素拖到它的列表之外时，这个元素都是隐藏的，直到我把它放到同一个列表或另一个列表中。 如果我错了，请告诉我，但是拖动的元素似乎不是列表项的副本，而是元素本身。 总之，我希望列表在拖动其中一个元素时不要更改其布局。 长话短说： 我在cdk文档中没有找到任何这样做的内容。
-
你好，堆栈溢出，目前正在处理一个需要拖动元素的任务；不是本机API所做的图像拖动，而是拖动实际的元素。元素应该显示一个要删除的位置框，并在将其拖过一个区域时更改其自身的内部内容，该区域将在删除时删除该元素。到目前为止，我发现了这个有用的指令，帮助我做到这一点https://xieziyu.github.io/angular2-draggable/#/usage/basic 问题是，一旦元素通过某个
-
我试图使用Selenium的Action类将JQuery嵌套可排序列表中的源元素拖放到另一个元素。我使用了标准的dragAndDrop方法，并将其分解为clickAndHold、moveToElement和release，但这两种方法都不适用。我甚至尝试使用源元素内部的子元素来拖动，但结果是一样的。 当我运行脚本时，测试返回为已通过，因此我知道正在找到元素，并且选择器有效。Selenium认为拖放
-
本文向大家介绍JavaScript实现移动端拖动元素，包括了JavaScript实现移动端拖动元素的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现移动端拖动元素的具体代码，供大家参考，具体内容如下 实现效果： 请切换到移动端页面查看！ 代码实现： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。