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

Я хотел бы обрабатывать функцию 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');
    }
});

Мое оповещение не срабатывает, а драгенд срабатывает. В чем разница между dragend и drop?

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

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


drag-and-drop jquery
person Syl    schedule 10.01.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

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

person sje397    schedule 10.01.2012