jquery - 拖放：更改背景

Question

我有一个带有可拖动对象的页面，名为#elementoDraggabile.

当我#elementoDraggabile在 x 轴上移动时，我还想更改另一个对象的背景#elementoDroppable

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

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

---

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

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

谢谢大家！！！

Answer 1

您可以使用on事件和位置功能。

$("#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/

Answer 2

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

这是一个简单的例子：

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