我在 jqxtree 中画了一棵树。我必须拖动树元素并绘制一个小框 div 并附加到 div id processFlowId
中。
拖放代码
$( ".dragItem" ).draggable({ revert: true,
revertDuration: 0,
cancel : 'span',
refreshPositions: true
//,containment: "parent"
,helper: 'clone'});
$('#jqxTree').jqxTree({
height: '200px',
width: '300px',
theme: 'energyblue',
allowDrag: true,
allowDrop: false
});
$(".dragItem").css({"position": ""});
var itemFlag =0;
$("#acceptDrop").droppable({
accept: ".dragItem",
activeClass: "drop-active",
hoverClass: "drop-hover",
drop: function (event, ui) {
var itemid = ui.draggable.attr("id");
itemFlag++
drawAttrList(itemid + "_" + itemFlag,itemid,"processElement",ui);
}
});
function drawAttrList(mainDivId, droppedToolId, dataMiningType,ui) {
var html = '<div class="mouseHover" id="'+ mainDivId+ '"'
+ 'style="width:200px;"'+'><div class="widget-box w"><div class="widget-header" title="'+ mainDivId+ '">';
html += '<h4 class="lighter smaller" onclick="openProperties(\''
+ mainDivId + '\',\'' + dataMiningType
+ '\')"><i class="icon-random blue"></i>' + droppedToolId + '</h4>';
html += '</div>';
html += '<div class="widget-body" ><div class="widget-main" ><div class="row-fluid">';
html += '<div id="cart_toolbarList " class="drags"><div id="'+itemFlag+ droppedToolId + 'List_items" style="height:100px">';
html += '<ul class="item-list ui-sortable ' + droppedToolId + 'List'+ itemFlag + '" style="height:100%;border-style: dashed;border-width: 1px;border-color: silver;">';
html += '</ul></div></div></div></div></div></div></div>';
$("#" + mainDivId).draggable({
revertDuration : 0,
refreshPositions : true,
revert: true,
helper : 'clone'
});
$("#processFlowId").append(html);
}
请引用我的 Jsfiddle
问题
我需要拖动li并在我放下的位置进行相应的绘制。现在它没有画在我们放下的位置。
有任何建议可以做到这一点! 提前致谢!
最佳答案
为了获取放置位置,我们使用 ui.position 它将给出相对于偏移元素的“顶部、左侧”。即,
var top = ui.position.top; // gives the top postion
var left = ui.position.left; // gives the left postion
现在,借助 style 属性,将这些 x 和 y 坐标附加到附加到 div id“processFlowId”的小框 div 中。比如,
<div class="mouseHover" id="'+ mainDivId+ '"'+ 'style="width:200px;position:absolute; top: '+ top+ 'px; left: '+ left+ 'px;"'>
查看更新后的fiddle
关于javascript - 拖放到放置 jquery 的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28234493/