HTML5 Drag-and-Drop: как настроить клонированные и оригинальные элементы?

Я хочу применить имя класса к перетаскиваемому элементу "призрак", а не к исходному элементу, который был клонирован. Вот функция, которую я имею на месте для dragstart событие:

function dragStart(event) {
    event.originalEvent.dataTransfer.effectAllowed = 'move';
    event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));
    console.log(event);
    console.log('Dragging...');
    $(event.currentTarget).addClass('dragging');
    return true;
}

на $(event.currentTarget).addClass('dragging'); строка добавляет .dragging класса в оригинальный элемент, но не клонируется, перетащив элемент.

Как правильно нацелить оба?

редактировать

глядя, чтобы справиться с этим с родной HTML5 как можно больше. Предпочитаю не использовать плагин jQuery.

7
css css3 drag-and-drop html5

6 ответов

Я не заядлый скриптер JavaScript, но я наткнулся на эту страницу, пытаясь найти что-то для вас, это может быть то, что вам нужно, в частности, версия перетаскивания прокси:

http://threedubmedia.com/demo/drag/

$('#demo6_box')
        .bind('dragstart',function( event ){
                if ( !$(event.target).is('.handle') ) return false;
                return $( this ).css('opacity',.5)
                        .clone().addClass('active')
                        .insertAfter( this );
                })
        .bind('drag',function( event ){
                $( event.dragProxy ).css({
                        top: event.offsetY,
                        left: event.offsetX
                        });
                })
        .bind('dragend',function( event ){
                $( event.dragProxy ).remove();
                $( this ).animate({
                        top: event.offsetY,
                        left: event.offsetX,
                        opacity: 1
                        })
                });

это все jQuery.

2

добавьте класс в исходный элемент, затем удалите его после начала перетаскивания (демо):

function dragStart(event) {
    var el = $(this);

    event.originalEvent.dataTransfer.effectAllowed = 'move';
    event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));

    el.addClass('dragging');
    setTimeout(function() { el.removeClass('dragging'); }, 0);
}
6

из этой строки кода:

event.originalEvent

кажется, что вы используете jquery? Поэтому просто учтите, что jquery делает вещи намного проще и совместим с кросс-браузером.

HTML5 native и метод jquery (используя только javascript), реализующий перетаскивание, почти одинаковы. HTML5 добавил только события перетаскивания, но ничего больше для перетаскивания методов:

без jquery:

function dragStart(event) {
    event.originalEvent.dataTransfer.effectAllowed = 'move';
    event.originalEvent.dataTransfer.setData("text/plain", event.target);//JUST ELEMENT references is ok here NO ID
    console.log(event);
    console.log('Dragging...');

    var clone = event.target.cloneNode(true);
    event.target.parentNode.appendChild(clone);
    event.target.ghostDragger = clone;//SET A REFERENCE TO THE HELPER

    $(clone).addClass('dragging');//NOW YOU HAVE A CLONE ELEMENT JUST USE this and remove on drag stop
    return true;
}

function dragging(event){
  var clone = event.target.ghostDragger;
  //here set clone LEFT and TOP from event mouse moves
}
//ON STOP REMOVE HELPER ELEMENT
function stopDrag(event){
  var clone = event.target.ghostDragger;
  clone.parentNode.removeChild(clone);
}

С библиотека jQuery:

$( "#draggable" ).draggable({ 
 helper: "clone", //EVEN here you can set the helper you want by defining a funcition
 start:function(event, ui){
   ui.helper.addClass('yourclass');
 }
});

Althoug я предложу использовать jQuery ui для перетаскивания. С его помощью вы можете персонализировать drag helper, как вам нужно.

1

Я знаю, что этот вопрос старый, но что вам нужно сделать, это создать / использовать видимый элемент (или изображение/холст и т. д.) https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#setDragImage.28.29

Итак, ты можешь сейчас перетащив элемент (this в контексте события обычно), клонируйте его, добавьте его в dom (гарантируя, что он "виден", он же не display: none или visibility:hidden), и затем вы можете применить к нему класс, чтобы вы могли нацелить сам перетаскиваемый элемент в стиль CSS. Затем добавьте этот элемент в качестве первого аргумента e.dataTransfer.setDragImage() и браузер будет использовать это вместо этого.

только не забудьте удалить его позже (dragend) или скрыть его каким-то образом.

вот скрипка, чтобы увидеть его в действии:http://jsfiddle.net/6TDvz/

1

возможно, я что-то упускаю, но для меня работает следующее, придавая как исходному, так и перетаскиваемому тексту желтый фон (установив класс). Возможно, в вашей конкретной ситуации есть что-то, что дает вам "призрачную" копию. Или, может быть, это как-то связано с тем, что вы уже используете jQuery. Все, что я могу сказать, это то, что при попытке воссоздать вашу проблему мой простой тестовый случай действительно работает нормально.

<!DOCTYPE html>
<html>
  <head>
    <title>Drag Test</title>
    <script>
      function startDrag(event) {
        var orig = document.getElementById('original');
        var dt = event.dataTransfer;

        orig.className += 'dragging';

        dt.effectAllowed = 'move';
        dt.setData('text/plain', 'This text may be dragged');
      }
    </script>

    <style>
      .dragging {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div id="original"  draggable="true" ondragstart="startDrag(event);">
      This text may be dragged.
    </div>
  </body>
</html>
0

Вы сказали:

Я хочу применить имя класса к перетаскиваемому элементу "призрак", а не исходный элемент, который был клонирован

Ну, с обычным перетаскиванием нет оригинального vs клонированного элемента, есть только перетаскиваемый элемент. Не видя остальной части реализации перетаскивания, нет никакого способа дать вам ответ. Мы не знаем, как называется" событие". Если dragStart событие HTML5 ondragstart event затем этот статья может вам помочь. Но если это пользовательское событие, созданное jQuery или какой-либо другой платформой, никто не сможет сказать вам, как получить исходный или клонированный элемент, если вы не поделитесь остальной частью своего кода.

Если вы не хотите полагаться на jQuery, вам придется написать всю функциональность перетаскивания с нуля. Вот несколько уроков как это сделать так:

JavaScript перетаскивание Учебник

Drag & Drop сортируемые списки w / JavaScript

HTML5 Drag & Drop

Если бы я мог сделать предложение, это было бы придерживаться w / jQuery. Создание кросс-браузерной совместимой системы перетаскивания с нуля потребует много времени. Если вы поделитесь остальной частью своего кода, я могу попытаться помочь вам с более конкретным ответом.

0