Question

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

当我在x轴上移动#elementoDraggabile时，我也希望改变另一个对象#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

您需要使用API，例如使用每次删除元素时触发的droppable元素的drop event，以更改目标的颜色。

这是一个简单的例子：

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

Answer 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/

拖放：更改背景

2 个答案: