[英]Drag and Drop in position dropped jquery
我在jqxtree中绘制了一棵树。 我必须拖动树元素并绘制一个小框div并追加到div id processFlowId
。
dragAndDrop代码
$( ".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,它将相对于offset元素给出“顶部,左侧”。 即
var top = ui.position.top; // gives the top postion
var left = ui.position.left; // gives the left postion
现在,借助style属性,将这些x和y坐标附加到小框div中,该小框div附加到div id“ processFlowId”中。 如,
<div class="mouseHover" id="'+ mainDivId+ '"'+ 'style="width:200px;position:absolute; top: '+ top+ 'px; left: '+ left+ 'px;"'>
查看更新的小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.