Javascript 拖放位置已拖放jquery

我画了一棵树。我必须拖动树元素并绘制一个小的box 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);
}

$（“.dragItem”）.draggable（{revert:true，
持续时间：0，
取消：“span”，
刷新位置：正确
//，遏制：“家长”
，helper:'clone'}）；
$（'#jqxTree'）.jqxTree({
高度：“200px”，
宽度：“300px”，
主题：“能量蓝”，
allowDrag:没错，
allowDrop:false
});
$（“.dragItem”）.css（{“位置”：“}）；
var itemFlag=0；
$（“#acceptDrop”）。可拖放({
接受：“.dragItem”，
activeClass:“删除活动”，
悬停类：“放下悬停”，
drop：函数（事件、用户界面）{
var itemid=ui.draggable.attr（“id”）；
itemFlag++
drawAttrList（itemid+“”+itemFlag，itemid，“processElement”，ui）；
}
});
函数drawAttrList（mainDivId、droppedToolId、dataMiningType、ui）{
var html=''；
html+=''+droppedToolId+''；
html+=''；
html+=''；
html+=''；
html+='
”；
html+='
'；
$（“#”+mainDivId）.可拖动({
持续时间：0，
他说:对,，
回复：对，
助手：“克隆”
});
$（“#processFlowId”）.append（html）；
}

请参阅我的

问题

我需要拖动李并相应地在我下降的位置绘制。现在它不是画在我们下降的位置

有什么建议吗！

---

提前谢谢

为了获得放置位置，我们使用ui.position，它将给出相对于偏移元素的“top，left”。i、 e

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;"'>