相关疑难解决方法(0)

我正在尝试制作一个可以通过拖放重新定位的元素列表.第一个元素Box 1在100%的时间内都能正常工作.有时第二个框可以工作,但其他框都没有按预期工作.一旦你开始拖动它们,它们似乎立即触发所有拖动事件.

如果重要的话,我正在使用最新的Chrome(第23版).

var $questionItems = $('.question-item');

$questionItems
  .on('dragstart', startDrag)
  .on('dragend', removeDropSpaces)
  .on('dragenter', toggleDropStyles)
  .on('dragleave', toggleDropStyles);


function startDrag(){
  console.log('dragging...');
  addDropSpaces();
}

function toggleDropStyles(){
  $(this).toggleClass('drag-over');
  console.log(this);
}


function addDropSpaces(){
  $questionItems.after('<div class="empty-drop-target"></div>');
  console.log('drop spaces added');
}

function removeDropSpaces(){
  $('.empty-drop-target').remove();
  console.log('drop spaces removed');
}

这是HTML:

<div class="question-item" draggable="true">Box 1: Milk was a bad choice.</div>
<div class="question-item" draggable="true">Box 2: I'm Ron Burgundy?</div>
<div class="question-item" draggable="true">Box 3: You ate the entire wheel of cheese?</div>
<div class="question-item" draggable="true">Box 4: Scotch scotch scotch</div>

这是我的代码的jsFiddle:http://jsfiddle.net/zGSpP/5/

我遇到了Chrome和Opera的一个错误,我想知道它是否已知,如果有,是否有解决方案？

如果我在dragstart事件上更改DOM,它会立即触发dragend事件？!这是一个错误还是背后有一些原因？只发生在Chrome和Opera中.Firefox有效.

我很感激每一个答案.

$('body').on({
      dragstart: function(e) {
        
        dragProfilefieldSrcElformid = $(this).attr("data-profilefieldid-formid");
        e.dataTransfer = e.originalEvent.dataTransfer;
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', $(this).attr("data-profilefieldid"));
        
        // Changing the DOM, fires the dragend Event in Chrome?
        $("#plugin_loginlogout_pfcontainer_" + dragProfilefieldSrcElformid).find(".plugin_loginlogout_pf_entryfield").addClass("highlight"); // This doesn't work in Chrome and Opera, but in Firefox
      },
      dragend: function() {
        console.log("dragend");
      }
      ".plugin_loginlogout_pf");

编辑:

将DOM Change放在setTimeout函数中似乎解决了这个问题!

我试图解决dragend当拖动到可拖动区域之外时立即触发事件的问题。例如，请注意以下视频中，将标签拖动到可拖动区域之外（在可拖动区域内时，它会立即注册）大约有 0.25 秒的延迟：https: //gyazo.com/18d1afc32eb065d1f35896697ef0479e。

这是 JSFiddle：http ://jsfiddle.net/radonirinamaminiaina/zfnj5rv4/ 。

这个问题大约 7 年前在这里被问到：HTML5 Dragend eventfireimmediately，但这似乎更像是一个浏览器限制，当它被问到时，我认为我的问题有很大不同。

有没有办法在将事件拖到可拖动区域之外时立即触发该事件？例如，在 jfiddle 示例中，如果“This div is Draggable”被拖动到浏览器的左上角，它会以零延迟“弹回”吗？

评论中的问题更新：这是我正在尝试执行的示例，其中包含来自 Excel 中的数据透视表的 4s 视频：gyazo.com/3ccd1c3abd7f92d3410022a83b5c25b9。基本上，当用户将标签拖动到“拖动区域之外”时，我希望能够立即删除该标签或触发显示该标签已被删除的动画。