<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          原生js實現拖拽與拖放事件,JavaScript實現元素拖拽、圖片到指定區域進行預覽的例子

          時間:?2017-12-14閱讀:?2946標簽:?拖拽

          拖拽,拖放事件可以通過拖拽實現數據傳遞,達到良好的交互效果,如:從操作系統拖拽文件實現文件選擇,拖拽實現元素布局的修改.


          drag and drop事件流程

          一個完整的drag and drop流程通常包含以下幾個步驟:

          1.設置可拖拽目標.設置屬性draggable="true"實現元素的可拖拽.
          2.監聽dragstart設置拖拽數據
          3.為拖拽操作設置反饋圖標(可選)
          4.設置允許的拖放效果,如copy,move,link
          5.設置拖放目標,默認情況下瀏覽器阻止所有的拖放操作,所以需要監聽dragenter或者dragover取消瀏覽器默認行為使元素可拖
          6.監聽drop事件執行所需操作


          拖拽事件

          以下是拖拽產生的一系列事件,拖拽事件產生時不會產生對應的鼠標事件.
          1.dragstart:拖拽開始時在被拖拽元素上觸發此事件,監聽器需要設置拖拽所需數據,從操作系統拖拽文件到瀏覽器時不觸發此事件.
          2.dragenter:拖拽鼠標進入元素時在該元素上觸發,用于給拖放元素設置視覺反饋,如高亮
          3.dragover:拖拽時鼠標在目標元素上移動時觸發.監聽器通過阻止瀏覽器默認行為設置元素為可拖放元素.
          4.dragleave:拖拽時鼠標移出目標元素時在目標元素上觸發.此時監聽器可以取消掉前面設置的視覺效果.
          5.drag:拖拽期間在被拖拽元素上連續觸發
          6.drop:鼠標在拖放目標上釋放時,在拖放目標上觸發.此時監聽器需要收集數據并且執行所需操作.如果是從操作系統拖放文件到瀏覽器,需要取消瀏覽器默認行為.
          7.dragend:鼠標在拖放目標上釋放時,在拖拽元素上觸發.將元素從瀏覽器拖放到操作系統時不會觸發此事件.


          DataTransfer對象

          拖拽事件周期中會初始化一個DataTransfer對象,用于保存拖拽數據和交互信息.以下是它的屬性和方法.
          1.dropEffect: 拖拽交互類型,通常決定瀏覽器如何顯示鼠標光標并控制拖放操作.常見的取值有copy,move,link和none
          2.effectAllowed: 指定允許的交互類型,可以取值:copy,move,link,copyLink,copyMove,limkMove, all, none默認為uninitialized(允許所有操作)
          3.files: 包含File對象的FileList對象.從操作系統向瀏覽器拖放文件時有用.
          4.types: 保存DataTransfer對象中設置的所有數據類型.
          5.setData(format, data): 以鍵值對設置數據,format通常為數據格式,如text,text/html
          6.getData(format): 獲取設置的對應格式數據,format與setData()中一致
          7.clearData(format): 清除指定格式的數據
          8.setDragImage(imgElement, x, y): 設置自定義圖標

          dataTransfer對象在傳遞給監聽器的事件對象中可以訪問,如下:

          draggableElement.addEventListener('dragstart', function (event) {
            event.dataTransfer.setData('text', 'Hello World');
          }, false);
          

          文本

          在頁面中選擇文本并拖拽,無需處理dragstart設置數據,瀏覽器自動設置選取的文本.相當于event.dataTransfer.setData("text/plain", "this is text to drag"),只需要在拖放目標上讀取對應格式的數據即可.


          實際案例

          前面介紹了最基本的理論知識,下面進行實際操作

          元素拖拽

          目標: 拖拽元素到達目的區域,改變在DOM中的位置,同時設置反饋視覺效果

          <div id="demo1">
            <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
            <h2>拖拽下面的方塊到上面任意容器中</h2>
          
            <!-- 設置draggable使元素成為可拖拽元素 -->
            <span id="demo1-src" draggable="true"></span>
          
            <style>
            #demo1 {
              margin: 20px;
            }
            #demo1 .panel-list {
              overflow: hidden;
              list-style: none;
              margin: 0;
              padding: 0;
            }
            #demo1 .panel-item {
              float: left;
              margin-right: 30px;
              width: 100px;
              height: 100px;
              background: #ddd;
              border: 1px solid #ddd;
            }
            #demo1-src {
              display: inline-block;
              width: 50px;
              height: 50px;
              background: purple;
            }
            #demo1 .over {
              border: 1px dashed #000;
              -webkit-transform: scale(0.8, 0.8);
            }
            </style>
            <script>
            (function () {
          
              var dnd = {
                // 初始化
                init: function () {
                  var me = this;
                  me.src = document.querySelector('#demo1-src');
                  me.panelList = document.querySelector('.panel-list');
          
                  // 為拖拽源監聽dragstart,設置關聯數據
                  me.src.addEventListener('dragstart', me.onDragStart, false);
          
                  // 拖拽鼠標移入元素,在拖放目標上設置視覺反饋
                  me.panelList.addEventListener('dragenter', me.onDragEnter, false);
          
                  // 取消元素dragover默認行為,使其可拖放
                  me.panelList.addEventListener('dragover', me.onDragOver, false);
          
                  // 拖拽移出元素,清除視覺反饋
                  me.panelList.addEventListener('dragleave', me.onDragLeave, false);
          
                  // 鼠標釋放,在拖放目標上接收數據并處理
                  me.panelList.addEventListener('drop', me.onDrop, false);
                },
                onDragStart: function (e) {
                  e.dataTransfer.setData('text/plain', 'demo1-src');
                },
                onDragEnter: function (e) {
                  if (e.target.classList.contains('panel-item')) {
                    e.target.classList.add('over');
                  }
                },
                onDragLeave: function (e) {
                  if (e.target.classList.contains('panel-item')) {
                    e.target.classList.remove('over');
                  }
                },
                onDragOver: function (e) {
                  e.preventDefault();
                },
                onDrop: function (e) {
                  var id = e.dataTransfer.getData('text/plain');
                  var src = document.getElementById(id);
                  var target = e.target;
                  if (target.classList.contains('panel-item')) {
                    target.appendChild(src);
                    target.classList.remove('over');
                  }
                }
          
              };
          
              dnd.init();
            }());
            </script>
          </div>
          

          從操作系統拖拽圖片到指定區域進行預覽

          從操作系統拖拽文件到瀏覽器中.不會觸發dragstart,dragend,只需取消拖放區域的默認行為,設置反饋,并在拖放發生時取消瀏覽器默認行為,通過e.dataTransfer.files獲取文件信息進行操作.

          <div id="demo2">
            <h3>從文件夾中拖拽圖片到下面的區域進行預覽</h3>
            <ul></ul>
            <style>
            #demo2 {
              margin: 20px;
            }
            #demo2 .preview {
              height: 300px;
              background: #ddd;
            }
            #demo2 li {
              float: left;
              margin-left: 40px;
            }
            #demo2 img {
              max-height: 150px;
              width: auto;
            }
            </style>
          
            <script>
            (function (w) {
              var doc = w.document;
          
              var dnd = {
                init: function () {
                  var me = this;
                  var preview = doc.querySelector('#demo2 .preview');
          
                  preview.addEventListener('dragover', function (e) {
                    e.preventDefault();
                  }, false);
          
                  preview.addEventListener('drop', function (e) {
                    // 操作系統拖放文件到瀏覽器需要取消默認行為
                    e.preventDefault();
          
                    [].forEach.call(e.dataTransfer.files, function (file) {
                      if (file && file.type.match('image.*')) {
                        var reader = new FileReader();
          
                        reader.onload = function (e) {
                          var img = doc.createElement('img');
                          img.src = e.target.result;
                          var li = doc.createElement('li');
                          li.appendChild(img);
                          preview.appendChild(li);
                        };
          
                        reader.readAsDataURL(file);
                      }
                    });
                  }, false);
                }
          
              };
          
              dnd.init();
            }(window));
            </script>
          </div>
          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/251

          js中drag拖拽

          在沒有drag事件的時候,做元素拖拽使用的都是mouse事件,但mouse在處理過程中可能有這樣或那樣的問題,主要還是感覺不流暢,如果小伙伴們不在考慮低版本IE(<IE9)的話,可以償試一下drag,會有意想不到的收獲。。

          純 JS 實現放大縮小拖拽采坑之旅

          最近團隊需要做一個智能客服懸浮窗功能,需要支持拖動、放大縮小等功能,因為這個是全局插件,為了兼容性考慮全部使用原生 JS 實現,不引用任何第三方庫或者插件。開發過程中遇到的一些問題及解決方法

          實現一個美化原生拖拽的draggable-polyfill

          在HTML5還未普及之前,實現元素的拖拽還算是一件比較麻煩的事,大概思路就是監聽鼠標移動相關事件,下面是偽代碼;HTML5新增了拖放draggable標準,拖拽就變得簡單了

          vue元素拖拽、移動

          使用范圍:兩個元素位置交換,移動元素到指定位置,另外如需有需監聽元素的拖拽情況,可調用對應的函數即可。如果不允許拖動到該元素區域內,可在dragover、dragenter中設置dropEffect:none;禁止拖拽。

          JS 仿頭條App頻道編輯功能 (拖拽排序,添加,刪減)

          由于,項目中使用App混合開發,要實現頻道編輯功能;在沒找到合適的解決方案的情況下,自己寫了這個庫;已經在項目中跑了2年多,有不錯的可用性;寫下這篇文章分享下

          實現元素拖拽的兩種方式

          為將要拖拽的元素設置允許拖拽,并賦予dragstart事件將其id轉換成數據保存;為容器添加dragover屬性添加事件阻止瀏覽器默認事件,允許元素放置,并賦予drop事件進行元素的放置。

          Element ui表格組件+sortablejs實現行拖拽排序

          運營小姐姐說想要可以直接拖拽排序的功能,原來在序號六的廣告可能會因為金主爸爸加錢換到序號一的位置,拖拽操作就很方便;實現方式:template部分、script部分

          實現平滑過渡的拖拽排序

          最近重讀Vue官方文檔,在列表的排序過渡這一小節,文檔提到,<transition-group> 組件有一個特殊的地方,不僅可以實現進入和離開動畫,還可以改變定位,官網示例如下

          ngDraggable.js_AngularJS之拖拽排序

          ngDraggable.js是一款比較簡單實用的angularJS拖拽插件,借助于封裝好的一些自定義指令,能夠快速的進行一些拖拽應用開發。首先先介紹一些基本的概念;ng-drop:是否允許放入拖拽元素

          js實現本地圖片文件拖拽效果

          如何拖拽圖片到指定位置,具體方法如下,在從本地上傳圖片的時候,如果使用拖拽效果,想想應該是更加的高大上,下面直接上js代碼

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网