[英]How to use jquery ui '.droppable' with jquery '.on' function?
I have three div 1, 2 and 3 within a main div ie: 我在主div中有三个div 1、2和3,即:
<div id="main">
<div style="height:30px; background-color:yellow;" class="bnr">Banner</div>
<div style="height:30px; background-color:yellow;" class="bnr">Banner2</div>
<div style="height:30px; background-color:yellow;" class="bnr">Banner3</div>
</div>
Now, I want to append a dragged <div class="other"></div>
after any of a <div>
with class 'bnr', append then, when I drop on 'placeholder'. 现在,我想追加一个拖
<div class="other"></div>
后的任何一个的<div>
与类“BNR”,追加然后,当我在“占位符”下降。 ie when I mouse over on any of these three <div>
, it shows a 'placeholder' in between. 即,当我将鼠标悬停在这三个
<div>
任何一个上时,它在两者之间显示一个“占位符”。 like I am mouse hovering on <div> 1
and it will show a placeholder <div>
in between <div> 1
and <div> 2
. 就像我将鼠标悬停在
<div> 1
,它将在<div> 1
和<div> 2
之间显示一个占位符<div>
。
Placeholder is like: 占位符如下:
<div style="height:30px; background-color:light-yellow;" class="placeholder"></div>
I have concluded with my try that I have to use '.droppable' function property 'over', 'out' and 'drop', instead of using, jquery's .mouseenter and .mouseleave functions. 我的尝试得出的结论是,必须使用'.droppable'函数属性'over','out'和'drop',而不是使用jquery的.mouseenter和.mouseleave函数。
$(".other").draggable({
helper: 'clone'
});
$('.placeholder').droppable({
over: function (event, ui) {
},
out: function (event, ui) {
},
drop: function (event, ui) {
}
});
How can I drop on 'placeholder' div? 如何放置“占位符” div?
Because its created after mouseover. 因为它是在鼠标悬停后创建的。 So from here '.on' function comes into play.
因此,从这里开始,“。on”功能开始起作用。 Now tell me how I can use '.droppable' with '.on' or help me to find any other solution.
现在告诉我如何将'.droppable'与'.on'结合使用或帮助我找到其他解决方案。
here is a sample code: 这是一个示例代码:
$(".other").draggable({
helper: 'clone'
});
$('.bnr').droppable({
over: function (event, ui) {
$('.placeholder').remove();
$('<div style="height:30px; background-color:light-yellow;" class="placeholder"></div>').insertAfter(this);
},
out: function (event, ui) {
},
drop: function (event, ui) {
$('.placeholder').remove();
$(".other").insertAfter(this);
}
});
see working demo: http://jsbin.com/hoyonugupu/edit?html,js,output 参见工作演示: http : //jsbin.com/hoyonugupu/edit?html,js,输出
It looks like you're looking for a draggable which is connected to sortable widget having custom placeholder
via connectToSortable
option: 看起来您正在寻找可拖动对象,该对象通过
connectToSortable
选项连接到具有自定义placeholder
可排序小部件:
$('#main').sortable({ placeholder: 'placeholder' }); $('.draggable').draggable({ helper: 'clone', connectToSortable: '#main' });
#main { margin-bottom: 50px; } #main div.bnr { height: 30px; background-color: yellow; } .placeholder { visibility: visible; height: 30px; background-color: orange; } .draggable { width:100%; height: 30px; background: dodgerblue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div id="main"> <div class="bnr">Banner</div> <div class="bnr">Banner2</div> <div class="bnr">Banner3</div> </div> <div class="draggable">Drag Me</div>
No need to manually inject elements and stuff, jQuery UI has inbuilt options for these interactions. 无需手动注入元素和东西,jQuery UI具有用于这些交互的内置选项。
Side note: Please don't use inline styles. 注意:请不要使用内联样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.