I have a tree drawn in jqxtree . I have to drag the tree element and draw a small box div and append into div id processFlowId
.
dragAndDrop code
$( ".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);
}
Please refer my Jsfiddle
Problem
I need to drag the li and draw accordingly in the position where I dropped. Now it is not drawn in the position where we dropped.
Any suggestions to make this! Thanks in Advance!
To get the drop position, we use ui.position which will gives "top, left" relative to the offset element. ie,
var top = ui.position.top; // gives the top postion
var left = ui.position.left; // gives the left postion
Now append these x and y coordinates, to the small box div which is appended into div id "processFlowId", with the help of style attribute. Such as,
<div class="mouseHover" id="'+ mainDivId+ '"'+ 'style="width:200px;position:absolute; top: '+ top+ 'px; left: '+ left+ 'px;"'>
Check out the updated fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.