jQuery UI draggable - 如果元素被拖动

时间:2014-03-18 06:14:41

标签: jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

我希望当 draggable div 拖入 droppable div 时,可放置的div颜色会获得另一种颜色,然后可拖动的div宽度/高度变大,完全适合droppable div。

这是JSFiddle

例如,当你将红色圆圈拖入大圆圈时,我想将大的div颜色变为红色,红色圆圈适合大的div。

对于这些问题,我写下了这些代码:

    if ($(draggable).hasClass('dropped')) {
        droppable.css({
            background: 'red'
        });
        draggable.css({                    
            width: '300px',
            height: '300px'
        });
    }

但这些不起作用,我不知道如何使拖曳适合放置。

1 个答案:

答案 0 :(得分:2)

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需要您position: relative上的#BigSixbox-sizing:border-box上的.Six

小提琴:http://jsfiddle.net/37YpH/3/