javascript - RactiveJS 可拖动使用鼠标事件

Question

我正在尝试使用代理事件(on-mousedown、up、move、out)通过 RactiveJS 实现一个简单的可拖动 DIV

正在关注 JSFiddle工作正常，但是当用户移动鼠标太快时拖动停止。这仅仅是因为在我的例子中，鼠标事件处理程序位于 DIV 标记上，而不是正文或文档元素上。我的最终想法是创建一个 slider 组件，但我正在寻求提供最佳用户体验并使它更像 JQuery 的可拖动组件。

模板:

<div class="rect {{drag ? 'dragging' : ''}}" 
         on-mousedown="startDrag"
         on-mouseup="stopDrag" 
         on-mouseout="stopDrag" 
         on-mousemove="drag"
         style="top:{{top}}px; left:{{left}}px;">
</div>

active 实例:

var ractive = new Ractive({
    el: "#content",
    template: "#template",
    data: {left:20,top:80}
});
ractive.on({
    startDrag : function (event) {
        this.set({
            'drag': true,
            'mouseX': event.original.clientX - this.get('left'),
            'mouseY': event.original.clientY - this.get('top')
        });
    },
    stopDrag : function (event) {
        this.set('drag', false);
    },
    drag : function (event) {
        if(this.get('drag')) {
            var x = event.original.clientX, 
                y = event.original.clientY;
            this.set({
                top: y - this.get('mouseY') ,
                left: x - this.get('mouseX')
            });
            event.original.stopPropagation();
        }
    }
})

如何改进上面的代码？

Answer 1

通常 mousemove 和 mouseend 需要在 document 上。我发现在 Ractive 中，装饰器通常更适合拖动。这是一个让你继续前进的例子(http://jsfiddle.net/h9j2hdyj/1/):

<div class="rect noSelect {{ dragging ? 'dragging' : ''}}" 
     decorator='drag:"position"'
     style="{{#position}}top:{{top}}px;left:{{left}}px{{/}}">
</div>

装饰器:

Ractive.decorators.drag = function(node, keypath){

    var ractive = this, initial, begin, startPos;

    node.addEventListener('mousedown', start, false)

    function listenOnDocument(){
        document.addEventListener('mousemove', move, false)
        document.addEventListener('mouseup', unlistenOnDocument, false)
    }

    function unlistenOnDocument(){
        document.removeEventListener('mousemove', move, false)
        document.removeEventListener('mouseup', end, false)
    }

    function start(e){
        begin = { x: e.x, y: e.y }
        startPos = ractive.get(keypath)
        startPos = { x: startPos.left, y: startPos.top }
        ractive.set('dragging', true)
        listenOnDocument()
        e.preventDefault()
        e.stopPropagation()
    }

    function move(e){
        ractive.set(keypath, {
            left: startPos.x + (e.x - begin.x),
            top: startPos.y + (e.y - begin.y)
        })
        e.preventDefault()
        e.stopPropagation()
    }

    function end(){
        unlistenOnDocument()
        ractive.set('dragging', false)
    }

  return {
      update: function(pos){
          console.log(pos)
          position = pos
      },
    teardown: function(){
        node.removeEventListener('mousedown', start, false)
        end()
    }
  }

}