拖放:更改背景

时间:2012-11-09 10:37:11

标签: jquery background drag-and-drop

我有一个名为#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(){。是不是?

感谢所有人!!!

2 个答案:

答案 0 :(得分:0)

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

这是一个简单的例子:

  

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

答案 1 :(得分:0)

您可以使用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/