Перетащите оригинальный элемент HTML5 перетащите

Я работаю над интерфейсом перетаскивания, используя родной интерфейс перетаскивания 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>

Я создаю addEventListener для dragstart и запускаю следующую функцию

function dragStart (e) {
            var t = this;
            n(t).addClass('rot_15');
            e.dataTransfer.effectAllowed = 'move';
        }

Он будет отлично применять мой класс к исходному элементу, но я не могу переместить исходный элемент. Браузеры создают изображение "клон / призрак"... Я видел, где вы можете создать свое собственное изображение для показа при перетаскивании с помощью setDragImage, но как я могу перетащить фактический элемент, который перетаскивает пользователь?

Источник

2 ответа

(Не совсем ответ, но слишком долго для комментария)

.изображение клонируется, и вы перетаскиваете клон.

Не совсем уверен, что вы подразумеваете под этим. Я просто скопировал / вставил пример на страницу, на которую я ссылался - ничего подобного не происходит. Там нет дублирования или клонирования каких-либо элементов. Возможно, вы не уверены в действии appendChild? Пример кода просто создает div, за которым следует изображение. Вы можете перетаскивать изображение на div. Это приводит к тому, что тег img теперь содержится внутри div, а не представляет его, как в случае его загрузки. Также отмечу, что их целевой div (div id='div1') не имеет содержимого, он не имеет высоты. Вы должны добавить текст в div, чтобы сделать его видимым. Затем смотрите html-элементы в отладчике JavaScript, когда перетаскиваете n. На странице всего 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>
Источник

Следуя дополнительной информации, представленной в комментарии к ответу 1, способ (который я знаю) подойти к этому состоит в том, чтобы отказаться от поддержки html собственной перетаскивания, вместо того, чтобы реализовать ее самостоятельно.

Я забыл, что вызывает проблемы со старыми браузерами (особенно IE), хотя я чувствую, что это либо событие var 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>
Источник
Другие вопросы по тегам