我有一个带有文本的'p'元素。当拍摄"掉落事件"时,这些元素应与鼠标位置一起掉落在舞台上。我的代码是:
Html代码:
<ul>
<li><p id= "1" draggable="true" ondragstart="drag(event)">Element1</p></li>
<li><p id= "2" draggable="true" ondragstart="drag(event)">Element2</p></li>
<li><p id= "3" draggable="true" ondragstart="drag(event)">Element3</p></li>
<li><p id= "4" draggable="true" ondragstart="drag(event)">Element4</p></li>
<li><p id= "5" draggable="true" ondragstart="drag(event)">Element5</p></li>
</ul>
JavaScript代码:
var stage,modsLayer;
stage = new Kinetic.Stage({
container: 'container',
width: $('#container').width(),
height: 600
);
stage.on('drop',function(e){
//get stage mouse position coordinates to insert a text
});
modsLayer = new Kinetic.Layer();
stage.add(modsLayer);
$('.kineticjs-content canvas').attr('id','canvas');
$('.kineticjs-content canvas').attr('ondrop','drop(event)');
$('.kineticjs-content canvas').attr('ondragover','allowDrop(event)');
function allowDrop(e) {
e.preventDefault();
};
function drop(e) {
stage.fire('drop');
};
function drag(e) {
switch(e.target.tagName){
case "P":
e.dataTransfer.setData("comp_id",e.target.id);
e.dataTransfer.setData("comp_name",e.target.innerText);
e.dataTransfer.setData("tagName",e.target.tagName);
break;
};
对于类似的情况,我使用jQuery UI可拖动功能(因为HTML5拖动功能似乎无法在浏览器之间工作)首先标记我希望能够拖动到Kinetic JS画布上的图像(我的组件),并确定启动和停止功能:
$(".component").draggable
cursor: "crosshair"
cursorAt:
left: 0
top: 0
distance: 10
helper: "clone"
opacity: 0.5
start: (e, ui) ->
layoutDragStart e, ui
stop: (e, ui) ->
layoutDragStop e, ui
(这是咖啡文字)
使用以下layoutDragStart(提取我想要传输的数据),layoutDragStop:
layoutDragStart = (e, ui) ->
$(ui.helper).data "component", $(e.currentTarget).data("component")
$(ui.helper).data "height", $(e.currentTarget).data("height")
$(ui.helper).data "width", $(e.currentTarget).data("width")
layoutDragStop = (e, ui) ->
height = $(ui.helper).data "height"
width = $(ui.helper).data "width"
x = (ui.position.left - $("#layoutCanvas").position().left + parseFloat(width) / 2)
y = (ui.position.top - $("#layoutCanvas").position().top + parseFloat(height) / 2)
然后是向画布添加所需元素的代码。