模型

Question

我嵌套在li中的可拖动ul元素嵌套在div中，如下所示：

  <div class='group'>
    <div class='header'>
    // some stuff here
    </div>
    <ul>
      <li draggable='true'> 
         Stuff I want to drag and drop to another div.group
      </li>
    </ul>
  </div>

这些div元素有多个，我正在努力实现一个拖累和放大删除功能可将一个li组的div元素移动到另一个组。

我已经联系了ondragenter，ondragleave回调：

 // controller using mithril.js
    ctrl.onDragLeave = function () {
        return function (event) {
            var target;
            // Using isDropzone to recursively search for the appropriate div.group 
            // parent element, as event.target is always the children inside it
            if ((target = isDropzone(event.target)) != null) {
                target.style.background = "";
            }
        }
    };
    ctrl.onDragEnter = function () {
        return function (event) {
            var target;
            if ((target = isDropzone(event.target)) != null) {
                target.style.background = "purple";
            }
        };
    };
    function isDropzone(elem){
        if(elem == null){
            return null;
        }
        return elem.className == 'group' ? elem: isDropzone(elem.parentNode)
    }

当回调的event.target始终是div中的嵌套子元素（例如li）时会出现问题，因此不断触发回调。在这种情况下，我正在使用我的回调更改div.group的颜色，导致div.group不合需要地闪烁。

有没有办法委派事件，只允许div的{{1}}祖父母来处理事件？或者其他任何解决方法？

编辑：仍然想知道是否有办法做到这一点，但现在我正在使用我找到here的解决方法。

Answer 1

所以这将适合“你需要从不同角度处理这个问题”类别的答案。

尽可能避免 - 从附加处理程序中的event.target/event.currentTarget操作DOM。

有几点不同：

您的ondragleave和ondragenter处理程序应该只在控制器/ viewModel / stores中设置一些合适的“状态”属性
解析处理程序时，通常会在Mithril中触发重绘。在m.startComputation()内部启动，调用您的处理程序，然后调用m.endComputation()
您的“查看功能”再次运行。然后它反映了改变的模型。您的操作不会更改视图，您的视图会调用影响模型的操作，然后对这些更改做出反应。 MVC，而不是MVVM

模型

在您的控制器中，设置一个模型，跟踪显示拖放所需的所有状态ui

ctrl.dragging = m.prop(null)

ctrl.groups = m.prop([
  {
    name: 'Group A',
    dragOver: false,
    items: ['Draggable One', 'Draggable Two']
  },
  ...
  // same structure for all groups
])

查看

在您的视图中，设置反映模型状态的UI。让事件处理程序将有关操作的足够信息传递给控制器 - 足以使其能够正确响应操作模型的操作

return ctrl.groups.map(function (group, groupIdx) {
  return m('.group',[
    m('.header', group.name),
    m('ul', 
      {
        style: { background: (group.dragOver ? 'blue' : '')},
        ondragleave: function () {ctrl.handleDragLeave(groupIdx)},
        ondragenter: function () {ctrl.handleDragEnter(groupIdx)},
        ondrop: function () {ctrl.handleDrop(groupIdx)},
        ondragover: function (e) {e.preventDefault()}
      },
      group.items.map(function (item, itemIdx) {
        return m('li',
          {
            draggable: true,
            ondragstart: function () {ctrl.handleDragStart(itemIdx, groupIdx)}
          },
          item
      })
    )
  ])
})

现在进行设置，以便通过对控制器中的状态/模型更改做出反应来正确显示组。我们不需要操纵dom来说组有一个新项目，一个组需要一个新的背景颜色，或任何东西。我们只需要附加事件处理程序，以便控制器可以操作您的模型，然后视图将根据该模型重绘。

控制器

因此，您的控制器可以拥有处理程序，其中包含更新模型所需操作的所有信息。

以下是控制器上的一些处理程序：

ctrl.handleDragStart = function (itemIdx, groupIdx) {
  ctrl.dragging({itemIdx: itemIdx, groupIdx: groupIdx})
}

ctrl.handleDragEnter = function (groupIdx) {
  ctrl.groups()[groupIdx].dragOver = true
}

ctrl.handleDragLeave = function (groupIdx) {
  ctrl.groups()[groupIdx].dragOver = false
}

ctrl.handleDrop = function (toGroupIdx) {
  var groupIdx = ctrl.dragging().groupIdx
  var itemIdx = ctrl.dragging().itemIdx
  var dropped = ctrl.groups()[groupIdx].items.splice(itemIdx, 1)[0]

  ctrl.groups()[toGroupIdx].items.push(dropped)
  ctrl.groups()[toGroupIdx].dragOver = false
  ctrl.dragging(null)
}

尝试坚持使用秘银的MVC模型事件处理程序调用控制器上的操作，操作模型。然后视图会对这些模型的变化做出反应。这绕过了纠缠于DOM事件细节的需要。

这是一个完整的JSbin示例，显示了您要尝试的内容：

https://jsbin.com/pabehuj/edit?js,console,output

我得到了理想的效果，而不必担心事件授权。

另外，请注意在JSbin中，ondragenter处理程序：

ondragenter: function () {
  if (ctrl.dragging().groupIdx !== groupIdx) {
    ctrl.handleDragEnter(groupIdx)
  }
}

这是可放置区域不会改变其自身可拖动的颜色，这是我认为你在答案中寻找的东西之一。

将可拖动事件委派给父元素

1 个答案:

模型

查看

控制器