AngularJS实现拖拽

淡淡的烟草味﹌ 2023-06-15 09:43 7阅读 0赞

<!doctype html>
    <html ng-app="drag">
      <head>
        <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
        <script src="script.js"></script>
      </head>
      <body>
        <span draggable>Drag ME</span>
      </body>
    </html>

angular.module('drag', []).
      directive('draggable', function($document) {
        return function(scope, element, attr) {
          var startX = 0, startY = 0, x = 0, y = 0;
          element.css({
           position: 'relative',
           border: '1px solid red',
           backgroundColor: 'lightgrey',
           cursor: 'pointer'
          });
          element.on('mousedown', function(event) {
            // 阻止默认的选中内容的拖拽
            event.preventDefault();
            startX = event.screenX - x;
            startY = event.screenY - y;
            $document.on('mousemove', mousemove);
            $document.on('mouseup', mouseup);
          });
     
          function mousemove(event) {
            y = event.screenY - startY;
            x = event.screenX - startX;
            element.css({
              top: y + 'px',
              left:  x + 'px'
            });
          }
     
          function mouseup() {
            $document.unbind('mousemove', mousemove);
            $document.unbind('mouseup', mouseup);
          }
        }
      });

AngularJS中文网：[https://www.angularjs.net.cn/tutorial/15.html][https_www.angularjs.net.cn_tutorial_15.html]

[https_www.angularjs.net.cn_tutorial_15.html]: https://www.angularjs.net.cn/tutorial/15.html

发表评论取消回复

表情：

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

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

相关阅读

相关 AngularJS实现拖拽

<!doctype html> <html ng-app="drag"> <head> <script src="http://co

淡淡的烟草味﹌/ 2023年06月15日 09:43/ 0 赞/ 8 阅读

相关 react怎么实现拖拽

拖拽其实用h5的设置元素draggable就可以了，看代码就可以了拖拽容器 import React from 'react'; // 拖拽

浅浅的花香味﹌/ 2022年11月04日 00:53/ 0 赞/ 161 阅读

相关拖拽

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

梦里梦外;/ 2022年06月16日 12:47/ 0 赞/ 321 阅读

相关拷贝继承实现拖拽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>继承的

ゞ浴缸里的玫瑰/ 2022年06月14日 05:52/ 0 赞/ 324 阅读

相关 js实现拖拽事件

HTML <body> <div></div> </body> CSS div{ position: absolute

「爱情、让人受尽委屈。」/ 2022年05月29日 08:24/ 0 赞/ 300 阅读

相关 JavaScript 拖拽效果实现

我们在访问一些网站时，会发现有些内容是可以拖拽的，比较方便，那么使用JS怎么实现呢？今天结合代码展示下拖拽效果的实现。这里需要先熟悉下几个JS事件： onmouse

淩亂°似流年/ 2022年05月17日 07:39/ 0 赞/ 305 阅读

相关 JS代码实现拖拽（拖拽三剑客）

我们要实现对一个元素的拖拽，先假设在页面中有一个div，我们对div有一个简单的css样式，并且将div绝对定位。在标题中提到了实现拖拽的“三剑客”，也就是实现拖拽的三个

客官°小女子只卖身不卖艺/ 2022年03月20日 05:12/ 0 赞/ 475 阅读

相关原生angularjs实现拖拽布局功能

今天给大家带来一个很有用原生angularjs的拖拽布局功能，可以说是相当丝滑。先来个效果动态图：具体实现： HTML模板： <div>

墨蓝/ 2022年03月19日 10:52/ 0 赞/ 622 阅读

相关 Qt 实现文件拖拽

直接上代码 include<QDragEnterEvent> include<QMimeData> include<QDropEvent>

我会带着你远行/ 2022年03月15日 01:10/ 0 赞/ 561 阅读

相关 jQuery实现面板拖拽

一.实现功能 1.首先页面有一个面板或者对话框，有长和宽，可以设置为一个div。 2.当把鼠标over到div的某个位置时，鼠标的箭头图片变为一个拖拽的图片。 3.接

矫情吗；*/ 2022年01月31日 07:11/ 0 赞/ 311 阅读