jQuery UI可拖动 - 如果元素被拖动

Question

我希望当可拖动的 div 拖入可放置的 div 时，可放置的 div 的颜色会改变，然后可拖动的 div 的宽度/高度会变大并且完全适应可放置的 div。

这里有一个 JSFiddle。

例如，当您将红色圆形拖入大圆形时，我希望将大 div 的颜色更改为红色，并使红色圆形适合大 div。

对于这些问题，我编写了以下代码：

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

但这些都不起作用，我不知道如何使可拖动的适应可放置的区域。

- ITSolution

Answer 1

将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，并在.Six上设置box-sizing: border-box。

Fiddle链接：http://jsfiddle.net/37YpH/3/

- rzr

---

谢谢您的回复，这正是我想要的。但还有一个问题，当我想拖动已经放置的div时，它会跳回原来的位置，有没有办法让它平滑地移动？我的意思是，当我们想要拖出它时，它会恢复到默认大小，然后回到原来的位置。 - ITSolution

另外，当一个圆已经被放下时，它不应该接受另一个圆。有解决方案吗？ - ITSolution