[英]jQuery UI draggable - if element dragged
I want when draggable div dragged into droppable div , the droppable div color get another color, then draggable div width/height get bigger and exactly fit to droppable div. 我想当draggable div拖入droppable div时 ,droppable div颜色获得另一种颜色,然后draggable div width / height变得更大并且完全适合droppable div。
Here is a JSFiddle 这是一个JSFiddle
for example, when you dragging red circle into the big circle, i want to chang big div color to red, and red circle get fit to big div. 例如,当你将红色圆圈拖入大圆圈时,我想将大的div颜色变为红色,红色圆圈适合大的div。
for these questions i wrote down these codes: 对于这些问题,我写下了这些代码:
if ($(draggable).hasClass('dropped')) {
droppable.css({
background: 'red'
});
draggable.css({
width: '300px',
height: '300px'
});
}
but these doesn't works, and i dunno how to make draggable fit to droppable. 但这些不起作用,我不知道如何使拖曳适合放置。
Append draggable
to droppable
to make things easier. 将
draggable
添加到droppable
以使事情变得更容易。 I used .data()
to store the element index (to remember where to put it back after being dropped). 我使用
.data()
来存储元素索引(记住在删除后将其放回的位置)。
Example: 例:
$('#BigSix').droppable({
hoverClass: 'drop-hover',
drop: function (event, ui) {
var _this = $(this);
ui.draggable.addClass('dropped')
.data('droppedin', _this)
.data('SixIndex',ui.draggable.index());
_this.droppable('disable')
.append(ui.draggable)
}
});
And put it back when dragged out: 拖出时把它放回去:
var prevElemIndex = $(this).data('SixIndex')-1;
if(prevElemIndex==-1) {
$("#container").prepend($(this))
}
else {
$(".Six:eq("+prevElemIndex+")").after($(this))
}
You can then use CSS to style things your way: 然后,您可以使用CSS按照自己的方式设置样式:
#BigSix div.Six {
//(!important isnt good but i dont see another way around it)
position: absolute !important;
top:0 !important;
left:0 !important;
width: 100%;
height: 100%;
border: none;
}
The above CSS needs you to have position: relative
on #BigSix
and box-sizing:border-box
on .Six
上面的CSS需要你有
position: relative
对于#BigSix
和box-sizing:border-box
on .Six
Fiddle: http://jsfiddle.net/37YpH/3/ 小提琴: http : //jsfiddle.net/37YpH/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.