How to implement drag and drop function in AngularJS-JS Tutorial-php.cn

How to implement drag and drop function in AngularJS

亚连

Release： 2018-06-14 11:28:29

Original

2136 people have browsed it

This article mainly introduces the simple drag and drop function implemented by AngularJS, involving implementation techniques related to AngularJS event response and dynamic operation of page element attributes. Friends in need can refer to it

The example of this article describes the implementation of AngularJS Simple drag and drop functionality. Share it with everyone for your reference, the details are as follows:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <title>www.jb51.net AngularJS拖拽</title>
    <style>
    *{
      padding:0;
      margin:0;
    }
      .wei{
        width:100px;
        height:100px;
        background: red;
        position:absolute;
        cursor: pointer;
        /*left:0;top:0;*/
      }
    </style>
  </head>
  <body ng-controller="show">
      <p class="wei" wei-yi data="true"></p>
      <p class="wei" wei-yi data="false"></p>
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var app = angular.module(&#39;myApp&#39;,[]);
      //自定义属性
      app.directive("weiYi",function(){
        return{
          restrict :&#39;A&#39;,//A属性,E标签,C类名,D注释
          link :function(scope,element,attr){
            attr.data=angular.equals(attr.data,"true");
            //console.log(attr.data);
            console.log(element);
            element.on("mousedown",function(e){
              var that = $(this);
              console.log(attr.data);
              if(attr.data){
                $p=$("<p>");
                console.log($p);
                $p.css({"width":"100px","height":"100px","border": "2px dotted green","position":"absolute","left":that.offset().left,"top":that.offset().top});
                $p.appendTo($("body"));
              }
              var x=e.clientX-$(this).offset().left;
              var y=e.clientY-$(this).offset().top;
              //console.log(x+":"+y);
              $(document).on("mousemove",function(e){
                if(attr.data){
                  $p.css({"left":e.clientX-x,"top":e.clientY-y});
                }else{
                  that.css({"left":e.clientX-x,"top":e.clientY-y});
                }
              });
              $(document).on("mouseup",function(e){
                //console.log($p);
                $(document).off();
                if(attr.data){
                  that.css({"left":$p.offset().left,"top":$p.offset().top});
                  $p.remove();
                }
              })
            })
          }
        }
      });
      app.controller(&#39;show&#39;,[&#39;$scope&#39;,function(scope$){
      }]);
    </script>
  </body>
</html>

Copy after login

The operation effect is as follows:

The above is what I compiled for everyone, I hope it will be useful to everyone in the future help.

Detailed interpretation of React Native Flexbox layout

What are the methods for reference paths in vue single files?

Use Koa to build projects through Node.js

The above is the detailed content of How to implement drag and drop function in AngularJS. For more information, please follow other related articles on the PHP Chinese website!