Heim >Web-Frontend >js-Tutorial >So implementieren Sie die Drag-and-Drop-Funktion in AngularJS

So implementieren Sie die Drag-and-Drop-Funktion in AngularJS

亚连Original: 2018-06-14 11:28:292117Durchsuche

In diesem Artikel wird hauptsächlich die von AngularJS implementierte einfache Drag-and-Drop-Funktion vorgestellt, die Implementierungstechniken im Zusammenhang mit der AngularJS-Ereignisreaktion und der dynamischen Bedienung von Seitenelementattributen umfasst.

Das Beispiel hierfür Der Artikel beschreibt die Implementierung der einfachen Drag-and-Drop-Funktionalität von AngularJS. Ich teile es Ihnen als Referenz mit:

<!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>

Der Betriebseffekt ist wie folgt:

Das Obige ist das, was ich zusammengestellt habe Ich hoffe, es wird Ihnen in Zukunft weiterhelfen.

Verwandte Artikel:

Detaillierte Interpretation des React Native Flexbox-Layouts

Welche Methoden gibt es für Referenzpfade in Vue-Einzeldateien?

Verwenden Sie Koa, um Projekte über Node.js zu erstellen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Drag-and-Drop-Funktion in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie einen Chatroom mit socket.ioNächster Artikel：So implementieren Sie einen Chatroom mit socket.io

In Verbindung stehende Artikel

Mehr sehen