Drag & Drop HTML 5 jQuery: как запустить событие drop? - PullRequest
Новая
       2

Drag & Drop HTML 5 jQuery: как запустить событие drop?

1 голос
/ 10 января 2012

Я бы хотел использовать функцию Drag & Drop HTML 5 с помощью jQuery. Все в порядке, пока событие сброса не запущено. Посмотри на мой код: 

<div id="columns">
  <div class="column" draggable="true"><header>A</header></div>
  <div class="column" draggable="true"><header>B</header></div>
  <div class="column" draggable="true"><header>C</header></div>
</div>

$('#columns .column').on({
    dragstart: function() {
        $(this).css('opacity', '0.5');
    },
    dragleave: function() {
        $(this).removeClass('over');
    },
    dragenter: function() {
        $(this).addClass('over');
    },
    dragend: function() {
        $(this).css('opacity', '1');
    },
    drop: function() {
       alert('drop');
    }
});

Моё предупреждение не сработало, а драгенд. В чем разница между драгендом и дропом?

Я нашел кое-что о jQuery и событии отбрасывания, которое jQuery.event.props.push('dataTransfer');

Я застрял сейчас, я сделал скрипку, кто-то может помочь мне завершить мой тест? http://jsfiddle.net/sylouuu/bNQeJ/3/

1 Ответ

3 голосов
/ 10 января 2012

Проверьте это: http://jsfiddle.net/bNQeJ/4/

В соответствии с этим вам нужно вызвать event.preventDefault в последнем dragenter или dragover событии, чтобы создать действительную цель удаления.

...