拖放：更改背景答案

【问题标题】：Drag and drop: changing the background拖放：更改背景
【发布时间】：2012-11-09 10:37:11
【问题描述】：

我有一个页面，其中包含一个名为 #elementoDraggabile 的可拖动对象。

当我在 x 轴上移动 #elementoDraggabile 时，我也想改变另一个物体的背景#elementoDroppable

例如#elementoDraggabile的位置为x = 1，#elementoDroppable的背景色为green，当#elementoDraggabile为x = 2时，#elementoDroppable的背景色为@ 987654333@。有人可以帮助我吗？

这是我的例子：http://goo.gl/H3zmj

好的，新文件：http://goo.gl/P1saz

#droppable 的颜色在悬停时发生变化。是否可以在没有悬停的情况下更改他的背景但是当我拖动#draggable 时？可能我必须修改这一行：$("#draggable").on("hover",function(){。对吗？

谢谢大家！！！

【问题讨论】：

标签： jquery background drag-and-drop

【解决方案1】：

您需要使用 API，例如使用每次放置元素时触发的可放置元素的 drop event 来更改目标的颜色。

这是一个简单的例子：

http://jsbin.com/udijul/1/

【讨论】：

【解决方案2】：

您可以使用on 事件和position 函数。

$("#draggable").on("hover",function(){

var p = $("#draggable");
var position = p.position();

if(position.left >10)
{
    $("#droppable").css("background-color","green");
}
        if(position.left >20)
                {
                    $("#droppable").css("background-color","orange");       
                }

    });

这是工作代码：http://jsfiddle.net/jm8AG/

【讨论】：