现在,我在左图上绘制了一个舞台,两个图层和图像。我通过添加属性draggable: true
使图像可拖动。我找到的所有拖放样本(kinetic docs,tutorials,jsfiddles ...)都位于同一区域内。KineticJS从一层拖放到另一层
我该怎么做才能让谁是左层上绘制的项目将在合适的层仅下降,否则,让他们在jQuery的恢复一样(如果它是可执行的)?
这是我编辑的the jsfiddle。帮帮我!
现在,我在左图上绘制了一个舞台,两个图层和图像。我通过添加属性draggable: true
使图像可拖动。我找到的所有拖放样本(kinetic docs,tutorials,jsfiddles ...)都位于同一区域内。KineticJS从一层拖放到另一层
我该怎么做才能让谁是左层上绘制的项目将在合适的层仅下降,否则,让他们在jQuery的恢复一样(如果它是可执行的)?
这是我编辑的the jsfiddle。帮帮我!
你需要做的是复制对象,激发dragstart事件,然后在dragend上检查项目是否放置在正确的容器中,否则将其动画回原始容器。
实施例而不复归:http://cs.neiu.edu/~tsam/physics/index.phtml(可以与用户登录:测试,通过:测试)
示例代码:
itemBeingCloned.on( '鼠标按下touchstart',函数(){ 变种userPos = stage.getPointerPosition();
var cloneOfItem= new Kinetic.Image({
image: imageObj, // image of object being cloned
x: userPos.x,
y: userPos.y,
height: 25, // or set the height
width: 25, // or set the width
draggable: true,
offset: 12,
dragOnTop: false // you might actually allow this to be true
});
yourTemporaryLayer.add(cloneOfItem); // well, you need to store this in a layer temporarily, you should have a layer which takes up the whole stage, and two child layers under it, left and right
/* Lets define the behavior (events) of the item you want to copy */
cloneOfItem.on('dragmove', function(){
// in case you need to do something while moving the item
});
cloneOfItem.on('dragend', function(){ // once you are done dragging, check if placing somewhere, most of the logic will go here
// check if on right side,
//if so, add to right layer, else
//else animate back to original position, then destroy
});
cloneOfItem.on('dblclick dbltap', function(evt){ // in case you want to remove the item, I defined it as double-click event destroying the item
this.remove(); // remove from layer
this.destroy(); // destroy object
});
/* so when you do mousedown on the original item, it will create the item, and fire the previously defined events (above) */
cloneOfItem.fire('mousedown');
cloneOfItem.fire('touchstart');
cloneOfItem.fire('dragstart');
yourRightLayer.draw(); //redraw the layer just in case? maybe not needed
});
更新(更简单)
示例代码:
itemBeingCloned.on('mousedown touchstart', function(){
var userPos = stage.getPointerPosition();
var cloneOfItem= itemBeingCloned.clone();
yourTemporaryLayer.add(cloneOfItem); // well, you need to store this in a layer temporarily, you should have a layer which takes up the whole stage, and two child layers under it, left and right
cloneOfItem.on('dragend', function(){ // once you are done dragging, check if placing somewhere, most of the logic will go here
// check if on right side,
//if so, add to right layer, else
//else animate back to original position, then destroy
});
/* so when you do mousedown on the original item, it will create the item, and fire the previously defined events (above) */
cloneOfItem.fire('mousedown');
cloneOfItem.fire('touchstart');
cloneOfItem.fire('dragstart');
yourRightLayer.draw(); //redraw the layer just in case? maybe not needed
});
更新:这里是一个非常粗略的实施 http://jsfiddle.net/GLFxF/16/
继承人粗略实施http://jsfiddle.net/GLFxF/16/只是矩形 – SoluableNonagon
非常感谢!但矩形有一个奇怪的行为:/ –
是的,你必须将逻辑清除一点,以便它克隆只是项目。你原来的'房间'也不应该拖动。 – SoluableNonagon
我需要的其实是如何验证是否悬浮窗是正确的层中,通过使用'dragend'或'mouseup'或也许还有其他绑定事件,然后'allowDrop()'。如何实现这一点? –