angularjs: draggable js

最新推荐文章于 2024-07-30 13:59:51 发布

weixin_33882443

最新推荐文章于 2024-07-30 13:59:51 发布

阅读量204

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Nyan-Workflow-FC/p/10939671.html

版权

var startX = 0, startY = 0, x = 0, y = 0, minDragRang = 50;
var targetContainer = angular.element(document.getElementsByClassName('target-container-class'));
var targetHeader = angular.element(document.getElementsByClassName('target-header-class'));
targetHeader.css({
    position: 'relative',
    cursor: 'move'
});
targetHeader.on('mousedown', function (event) {
    event.preventDefault();
    startX = event.pageX - x;
    startY = event.pageY - y;
    $document.on('mousemove', mousemove);
    $document.on('mouseup', mouseup);
});

function mousemove(event) {
    var headerHeiget = parseFloat($('.target-container-class').css('margin-top'));
    var innerHeight = $(window).height();
    y = event.pageY - startY;
    if (y > (innerHeight - minDragRang - headerHeiget)) {
        y = innerHeight - minDragRang - headerHeiget;
    }
    if (y < -headerHeiget) {
        y = -headerHeiget;
    }
    x = event.pageX - startX;
    targetContainer.css({
        top: y + 'px',
        left: x + 'px'
    });
    if (y < 0) {
        $('.container').css('overflow-y', 'auto');
    }else {
        $('.container').css('overflow-y', 'hidden');
    }
}

function mouseup() {
    $document.off('mousemove', mousemove);
    $document.off('mouseup', mouseup);
}