jQuery拖放颜色div来改变另一个的背景
我有以下HTML
,包含4个
的 – 2个门和2个颜色,你可以从他们的
id
猜测。
我希望能够将任一颜色拖到任一门(例如左门上的蓝色和右边的黑色)并更改样式上的背景颜色。
即使有人能指出我至少正确的方向,我也会感激不尽。
您应该分别使用.draggable()
和.droppable()
方法将您的颜色
初始化为draggable和door
作为可删除的小部件。
然后,您可以使用droppable
的drop
事件处理程序来更改背景颜色。 在处理程序内部,您可以使用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中的颜色绘制它。
Interesting Posts