Javascript draggable containment - jQuery替代品

时间:2014-08-26 17:51:48

标签: javascript draggable containment

这是我的问题:
我建立的系统需要自定义版本的jQuery可拖动功能 问题是我不能让元素本身被包含,我尝试了几种方法。

FIDDLE: http://jsfiddle.net/f8w8v/18/

方法1

        var mouseStartPosition = {
                x: event.pageX,
                y: event.pageY,
            },
            elementPosition = {
                left: parseInt($sender.css('left')),
                top: parseInt($sender.css('top')),
            };

        $(window).on('mousemove',function(esub){
            var subEvent = eventData(esub).event,
                subSender = eventData(esub).sender,
                $subSender = $(subSender),
                mx = (subEvent.pageX - mouseStartPosition.x) || 0,
                my = (subEvent.pageY - mouseStartPosition.y) || 0,
                position = {
                    left : (parseInt($subSender.offset().left) <= 0) ? 0 : (elementPosition.left + mx),
                    top : (parseInt($subSender.offset().top) <= 0) ? 0 : (elementPosition.top + my),
                };
            $sender.css(position);
        });

使用此方法会导致元素捕捉到0px,但即使偏移量低于0,它也会在mousemove上捕捉。


方法2

if(position.left <= 0){ 
    $sender.css('left','0px');
    return false; 
} else if( position.top <= 0) { 
    $sender.css('top','0px');
    return false;
} else {
    $sender.css(position); 
}

这种方法的反应方式相同,但情况更糟,使用return false会导致元素忽略鼠标在相反的轴上移动。其余代码等于方法2。

要点: 我无法找到如何包含movin

0 个答案:

没有答案