拖放位置放置 jquery
Drag and Drop in position dropped jquery
我在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);
}
请参考我的杰斯菲德尔
问题
我需要拖动 li 并在我掉落的位置相应地绘制。现在它没有绘制在我们掉落的位置。
任何建议都可以做到这一点!提前感谢!
为了获得放置位置,我们使用 ui.position 它将相对于偏移元素给出"top, left"。
var top = ui.position.top; // gives the top postion
var left = ui.position.left; // gives the left postion
现在将这些 x 和 y 坐标附加到附加到div id "processFlowId" 中的小框div,借助 style 属性。如
<div class="mouseHover" id="'+ mainDivId+ '"'+ 'style="width:200px;position:absolute; top: '+ top+ 'px; left: '+ left+ 'px;"'>
查看更新的小提琴
相关文章:
- jquery试图按名称获取按钮位置
- jQuery循环在特定位置暂停
- 使用jQuery更改元素的顶部位置
- jquery:将动画绑定到滚动条位置的更好方法
- JQuery幻灯片,可点击编号位置
- jQuery-仅更改Y轴的CSS背景位置
- Jquery Draggable-在浏览器刷新时保持位置
- 防止用户在jQuery Mobile中ajax加载页面时单击其他位置
- 我可以't使用jQuery更改工具提示引导程序的位置
- jQuery位置选择器输入样式背景和焦点
- 有人知道有没有jquery插件可以在图像上写文本,并让用户将其放置在图像内的任何位置
- jQuery位置DIV固定在卷轴上
- jQuery位置DIV固定在滚动的顶部
- jquery位置随着.css()行为的奇怪而变化
- 获取相对于整个页面的 JQuery 位置
- 引导模式框打开jquery位置选择器
- 居中元素使用jQuery位置+变量
- jQuery位置不返回相对值
- JQuery位置选择器,如何设置从起点的最大允许距离
- 当前屏幕中间的 JQuery 位置