kineticjs - 动力学js在mousedown上将元素移动到另一层

Question

我知道 dragOnTop 是最近推出的，但我想使用一个特定的图层，而不是始终在顶部自动生成的图层。所以我创建了一个小提琴：http: //jsfiddle.net/jure/EwrkQ/

darthVaderImg.on("mousedown", function() {
    this.moveTo(temp);
    this.setDraggable(true);
    //...
}

但它不起作用！看来，当我更改图层时，我松开了鼠标事件挂钩...请帮助！

Answer 1

大部分问题源于对象初始状态draggable: false

到目前为止，这是我的解决方案，希望它能让你更接近：http: //jsfiddle.net/EwrkQ/4/

    darthVaderImg.on('mouseover', function() {
      document.body.style.cursor = 'move';
    });
    darthVaderImg.on('mousedown', function() {
      this.moveTo(temp);
      this.setDraggable(true);
      this.simulate('dragstart');
      layer.draw();
      temp.draw();
    });
    darthVaderImg.on('dragmove', function() {
      temp.draw();
    });
    darthVaderImg.on("dragend",function(){
        //this.setDraggable(false);
        this.moveTo(layer);
        layer.draw();
        temp.draw();
        this.off("mouseup");
      });

    darthVaderImg.on('mouseout', function() {
      document.body.style.cursor = 'default';
    });

Answer 2

好吧，既然 dragOnTop 将您的项目移动到一个临时层，那么您应该禁用该功能。

 darthVaderImg = new Kinetic.Image({... , dragOnTop: false, ...});

那应该行得通。

Answer 3

请参阅下面的链接，了解 kineticjs 在 mousedown 上将元素移动到另一层

http://codedbot.com/questions/3016590/kineticjs-move-element-to-another-layer-on-mousedown