Maison >interface Web >js tutoriel >Comment implémenter la fonction glisser-déposer dans AngularJS

Comment implémenter la fonction glisser-déposer dans AngularJS

亚连original: 2018-06-14 11:28:292189parcourir

Cet article présente principalement la simple fonction glisser-déposer implémentée par AngularJS, impliquant des techniques d'implémentation liées à la réponse aux événements AngularJS et au fonctionnement dynamique des attributs des éléments de page. Les amis dans le besoin peuvent s'y référer

L'exemple de ceci. L'article décrit l'implémentation de la fonctionnalité glisser-déposer simple d'AngularJS. Je le partage avec vous pour votre référence. Les détails sont les suivants :

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

L'effet de l'opération est le suivant :

Ce qui précède est quoi. J'ai compilé pour tout le monde. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Interprétation détaillée de la disposition React Native Flexbox

Quelles sont les méthodes pour les chemins de référence dans les fichiers uniques de vue ?

Utilisez Koa pour créer des projets via Node.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter une salle de discussion à l'aide de socket.ioArticle suivant：Comment implémenter une salle de discussion à l'aide de socket.io

Articles Liés

Voir plus