我希望当draggable div拖入droppable div时,droppable div颜色得到另一种颜色,然后draggable div宽度/高度变得更大并且完全适合droppable div。
这是一个JSFiddle
例如,当你将红色圆圈拖到大圆圈中时,我想将大div颜色更改为红色,并且红色圆圈适合大div。
对于这些问题我写下了这些代码:
if ($(draggable).hasClass('dropped')) {
droppable.css({
background: 'red'
});
draggable.css({
width: '300px',
height: '300px'
});
}
但是这些不起作用,我不知道如何使可拖动适合可放置。
最佳答案
将draggable
附加到droppable
以使事情变得更容易。
我使用 .data()
来存储元素索引(以记住删除后将其放回何处)。
示例:
$('#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)
}
});
拖出后将其放回原处:
var prevElemIndex = $(this).data('SixIndex')-1;
if(prevElemIndex==-1) {
$("#container").prepend($(this))
}
else {
$(".Six:eq("+prevElemIndex+")").after($(this))
}
然后您可以使用 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;
}
上述CSS需要您在#BigSix
上使用position:relative
,在上使用
box-sizing:border-box
。六
fiddle :http://jsfiddle.net/37YpH/3/
关于jQuery UI Draggable - 如果元素被拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22471681/