Question

我需要附加文档对象以将div移动到另一个div中，这里是脚本：http://jsfiddle.net/vhDpG/2/我想在#bee_div1内移动块“moveme”而不是{{1} }}，但每次在#body

内移动鼠标时，都必须触发动作 - 动画（）

谢谢大家的帮助！

Answer 1

试试这个：http://jsfiddle.net/RBaXe/12

注意我正在根据其父容器设置边界，而不是让蜜蜂离开边界

我还添加了一些边框，以便我们可以判断它是否真的停留在我们设置的范围内

编辑顶部和左边界 http://jsfiddle.net/RBaXe/12/

Answer 2

检查容器的边界并相应地移动div，如下所示：

$("#body").mousemove(function(event) {
    var top = $('#bee_div1').offset().top;
    var bottom = $('#bee_div1').offset().top + $('#bee_div1').height() - $('#bee1').outerHeight();
    var left = $('#bee_div1').offset().left;
    var right = $('#bee_div1').offset().left + $('#bee_div1').width() - $('#bee1').outerWidth();

    var x = 0;
    var y = 0;

    if( event.pageX > right) {
        x = right;       
    } else if( event.pageX < left) {
        x = left;      
    } else {
        x = event.pageX;   
    }

    if( event.pageY > bottom) {
        y = bottom;      
    } else if( event.pageY < top) {
        y = top;      
    } else {
        y = event.pageY;  
    }

    console.log(event.pageX, event.pageY, top, bottom, left, right);
   $("#bee1").stop().animate({left: x, top: y}, 100)
});

http://jsfiddle.net/bsrykt/MvkZJ/

附加文档对象

2 个答案: