angularjs: draggable js

客官°小女子只卖身不卖艺 2021-12-24 13:57 208阅读 0赞

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);
    }

转载于:https://www.cnblogs.com/Nyan-Workflow-FC/p/10939671.html

发表评论取消回复

表情：

评论列表（有 0 条评论，208人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI 实例 - 拖动（Draggable）

允许使用鼠标移动元素。如需了解更多有关 draggable 交互的细节，请查看 API 文档 [可拖拽小部件（Draggable Widget）][Draggable Wi

末蓝、/ 2024年03月24日 16:05/ 0 赞/ 75 阅读

相关 EasyUI中拖动draggable的使用

场景 EasyUI环境搭建与入门基础语法： [https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/9

忘是亡心i/ 2023年10月18日 19:22/ 0 赞/ 145 阅读

相关 AngularJS 和 Vue.JS区别

目录 1. 背景： 2. 版本： 3. 应用场景： 4. 语法： 5. 双向数据绑定： 6. 指令： 7. 组件： 8.

朴灿烈づ我的快乐病毒、/ 2023年10月14日 10:05/ 0 赞/ 15 阅读

相关笔记列表：Draggable 拖拽排序

前言通过上一篇的学习，大家对于 Vue 组件化有了一定的了解。本篇继续使用组件化的思想来实现笔记列表，同时在组件化的基础上，对笔记列表实现拖拽排序的功能。知识准备

r囧r小猫/ 2022年12月09日 05:27/ 0 赞/ 211 阅读

相关 Draggable 拖动元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

妖狐艹你老母/ 2022年12月04日 08:37/ 0 赞/ 204 阅读

相关深入理解原生js拖放（draggable）

本来是打算要自己总结的，但发现了一篇比较好的博客，把我想写的都写了，甚至更加全面，所以，我只把我认为比较重要的知识点提炼一下，其他的都是转载的，想看原博主的请点击[原生js拖放

左手的ㄟ右手/ 2022年05月29日 13:17/ 0 赞/ 469 阅读

相关使用Angularjs和Vue.js对比

使用Angularjs和Vue.js对比之前项目都是使用Angularjs，（注明此处主要讲Angularjs 1）在初步使用Vue.js后做一个简单的对比笔

柔情只为你懂/ 2022年05月27日 02:40/ 0 赞/ 144 阅读

相关 JS 调用Angularjs 的方法

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] // 1. 获取 Controller let appElement

今天药忘吃喽~/ 2022年01月17日 04:41/ 0 赞/ 328 阅读

相关 angularjs: draggable js

var startX = 0, startY = 0, x = 0, y = 0, minDragRang = 50; var targetContainer

客官°小女子只卖身不卖艺/ 2021年12月24日 13:57/ 0 赞/ 209 阅读

相关 HTML draggable 属性

HTML draggable 属性此属性规定元素是否可拖动，链接和图像默认是可拖动的（HTML5新增）。

小灰灰/ 2020年05月16日 18:58/ 0 赞/ 598 阅读