jQuery拖放颜色div来改变另一个的背景

我有以下HTML ,包含4个

的 – 2个门和2个颜色,你可以从他们的id猜测。

我希望能够将任一颜色拖到任一门(例如左门上的蓝色和右边的黑色)并更改样式上的背景颜色。

 

即使有人能指出我至少正确的方向,我也会感激不尽。

您应该分别使用.draggable().droppable()方法将您的颜色

初始化为draggable和door

作为可删除的小部件。

然后,您可以使用droppabledrop事件处理程序来更改背景颜色。 在处理程序内部,您可以使用ui.draggable使用this拖放元素访问droppable,如下所示:

 $(".color").draggable({ revert:true }); $(".door").droppable({ drop: function(e, ui) { console.log(ui.draggable) $(this).css("background-color", ui.draggable.attr("id")); } }); 
 .door { display: inline-block; width: 50px; height: 120px; border: 1px solid; margin: 5px; } .color { float: right; width: 50px; height: 50px; } .white { background: #fff; } #black { background: #000; } #blue { clear: left; background: royalblue; } 
   

在“可拖动”的停止事件中,检查哪个div是目标(获取拖动的div的“左”和“顶部”属性)并使用拖动的div中的颜色绘制它。