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 move元素到mousedown

上的另一个图层

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

kineticjs将元素移动到mousedown上的另一层

3 个答案: