使用AngularJS怎么實(shí)現(xiàn)一個(gè)拖拽功能

本篇文章給大家分享的是有關(guān)使用AngularJS怎么實(shí)現(xiàn)一個(gè)拖拽功能，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

貢山ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

具體如下：

<!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">
      <div class="wei" wei-yi data="true"></div>
      <div class="wei" wei-yi data="false"></div>
    <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('myApp',[]);
      //自定義屬性
      app.directive("weiYi",function(){
        return{
          restrict :'A',//A屬性,E標(biāo)簽,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){
                $div=$("<div>");
                console.log($div);
                $div.css({"width":"100px","height":"100px","border": "2px dotted green","position":"absolute","left":that.offset().left,"top":that.offset().top});
                $div.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){
                  $div.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($div);
                $(document).off();
                if(attr.data){
                  that.css({"left":$div.offset().left,"top":$div.offset().top});
                  $div.remove();
                }
              })
            })
          }
        }
      });
      app.controller('show',['$scope',function(scope$){
      }]);
    </script>
  </body>
</html>

以上就是使用AngularJS怎么實(shí)現(xiàn)一個(gè)拖拽功能，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：使用AngularJS怎么實(shí)現(xiàn)一個(gè)拖拽功能
轉(zhuǎn)載源于：http://muchs.cn/article0/iiojoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)頁(yè)設(shè)計(jì)公司、建站公司、做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站