2. 程式人生 > >HTML5高階例項之Drag&Drop

HTML5高階例項之Drag&Drop

阿新 • • 發佈：2019-01-29
var relativeX = 0;//可移動元素相對於父元素的位置 var relativeY = 0; var mousedownX = 0;//滑鼠在可移動元素上單擊時，相對於該元素的位置 0 < x < 100 var mousedownY = 0; var draggableEle = document.getElementById('child'); function dragstart(ev) { //ev.dataTransfer.setData("Text",ev.target.id);//獲取拖動元素例項 } function
drag(ev) { } function mousedown(ev) { //ev物件下offsetX offsetY滑鼠在該移動元素上的位置 mousedownX = ev.offsetX; mousedownY = ev.offsetY; } function dragend(ev) { //ev物件下screenX clientX pageX x都相同 //ev物件下clientY pageY y都相同，相對於可視區域的垂直位置；但screenY不同，screenY是相對於螢幕的垂直位置
//ev物件下offsetX offsetY滑鼠移動的位移+滑鼠在該移動元素上的位置 //DOM元素屬性操作方法 getAttribute()、setAttribute()、removeAttribute() //DOM元素樣式操作方法 elm.style.color 獲取和賦值 relativeX += ev.offsetX - mousedownX; relativeY += ev.offsetY - mousedownY; //draggableEle.setAttribute('style','left:'+ relativeX + 'px;top:' + relativeY + 'px');//失效，因為重置了所有屬性，丟失了寬高
//水平方向 if(ev.screenX <= 20 || ev.screenX >= 620){//鼠標出界 if(ev.screenX <= 20){//父元素相對於螢幕的margin-left: 20px; draggableEle.style.left = 0 + 'px'; relativeX = 0;//注意：此處沒有px }else if(ev.screenX >= 620){//父元素寬600 + 20 draggableEle.style.left = 500 + 'px';//600-100 relativeX = 500;//注意：此處沒有px }else{ draggableEle.style.left = relativeX + 'px'; } }else{//元素出界滑鼠沒有出界 if(ev.screenX <= mousedownX + 20){ draggableEle.style.left = 0 + 'px'; relativeX = 0;//注意：此處沒有px }else if(ev.screenX >= mousedownX + 520){//600-100+20 draggableEle.style.left = 500 + 'px'; relativeX = 500;//注意：此處沒有px }else{ draggableEle.style.left = relativeX + 'px'; } } //垂直方向 if(ev.pageY <= 20 || ev.pageY >= 440){//鼠標出界 if(ev.pageY <= 40){ draggableEle.style.top = 0 + 'px'; relativeY = 0;//注意：此處沒有px }else if(ev.pageY >= 440){ draggableEle.style.top = 340 + 'px'; relativeY = 340;//注意：此處沒有px }else{ draggableEle.style.top = relativeY + 'px'; } }else{//元素出界滑鼠沒有出界 if(ev.pageY <= mousedownY + 40){ draggableEle.style.top = 0 + 'px'; relativeY = 0;//注意：此處沒有px }else if(ev.pageY >= mousedownY + 380){//400-60+40 draggableEle.style.top = 340 + 'px'; relativeY = 340;//注意：此處沒有px }else{ draggableEle.style.top = relativeY + 'px'; } } } //必須重寫dragenter事件和dragover事件，阻止這兩個事件的預設行為觸發，才能觸發drop事件 function dragenter(ev) { ev.preventDefault();//dragenter事件的預設行為是該元素不允許其他元素放入，阻止預設行為之後，其他元素即可放入 } function dragover(ev) { ev.preventDefault();//dragover事件的預設行為是該元素不允許其他元素放入，阻止預設行為之後，其他元素即可放入 } //在Firefox3.5+中，放置事件的預設行為是開啟被放到放置目標上的URL，為了相容性，需要取消drop事件的預設行為 function drop(ev) { ev.preventDefault(); }

相關推薦

HTML5高階例項之Drag&Drop

var relativeX = 0;//可移動元素相對於父元素的位置 var relativeY = 0; var mousedownX = 0;//滑鼠在可移動元素上單擊時，相對於該元素的位置 0 < x < 100 var mousedownY = 0;

HTML5高階例項之video

更新日期：2018年3月27日18:07:55 動態建立常規video let userVideo = document.createElement('video'); document.body.appendChild(userVideo);

html5 drag drop

// 生命週期 //dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> //dragend //拖拽元素 dragstart ->drag ->dragend //

python 高階特性之filter例項程式碼

example01.py # -*- coding: utf-8 -*- """ 高階特性：filter """ #在一個list中，刪掉偶數，只保留奇數，可以這麼寫： def is_odd(n): return 0 == n%2 s = list(filter(is_odd

HTML5高階之css清除float浮動

   我們先來回憶一下float的特徵：        1）塊在一排顯示        2）內聯支援寬高        3）預設內容撐開寬度        4）脫離文件流        5）提升層級半層     由於float浮動脫離文件流，那麼就很容易產生各種相容性和由於

HTML5原生拖拽/拖放(drag & drop)詳解

前言 拖放（drap && drop）在我們平時的工作中，經常遇到。它表示：抓取物件以後拖放到另一個位置。目前，它是HTML5標準的一部分。我從幾個方面學習並實踐這個功能。 拖放的流程對應的事件 我們先看下拖放的流程： 選中 ---> 拖動 ---> 釋放 然後，我們一步

HTML5 高階之canvas 繪製圖形

canvas是HTML5中新增的標籤，像所有dom一樣，擁有自己的屬性、方法、和事件，其中就有繪圖的方法，js能夠呼叫它在網頁上完成繪圖。 canvas也是HTML5中最強大的特性之一，允許開發者使用動態和互動式方法在web上實現桌面應用程式的功能 canvas元素會

HTML5高階之Web儲存（帶示例）

Web儲存 瀏覽器儲存資料   cookie    和伺服器的session HTML5新增的web儲存 --localStorage 特點：長時間儲存使用者資料 --sessionStorage 特點：瀏覽器當前視窗有效（如果瀏覽器當前視窗關閉，

人人網首頁拖拽上傳詳解(HTML5 Drag&Drop、FileReader API、FormData)

http://fed.renren.com/archives/391 早在公元2011年6月3日傍晚，人人網推出了一個很裝B且完全無視IE瀏覽器的功能——拖拽上床。哦，Sorry, 是拖拽上傳。本文將重點介紹實現拖拽上傳的幾個HTML5技術：Drag&Drop、

HTML5元素拖拽drag與拖放drop相關API

其實HTML5就是新增一些有用的API 讓我們更輕鬆的開發 從而把更多精力都放在業務邏輯上來 這些API的使用也非常簡單 不過我的記性不太好 所以還是以部落格的形式記錄下來（手動滑稽） 今天就來寫一下這個拖拽API 預設拖拽 說起拖放，其實最

HTML5遊戲實戰之20行代碼實現打地鼠

before line asc win csdn 實戰 動畫 and wiki 之前寫過一篇打地鼠的博客70行的代碼實現打地鼠遊戲，細致思考過後，發現70行代碼都有點多余了，應用tangide的控件特性，能夠將代碼量縮減到20行左右。 先show一下終於成果，點擊試

HTML5新特性之History

事件對象 右上角 ctype 嚴重 panel jquery 們的 幸運 視圖 幾年前，Ajax的興起給互聯網帶來了新的生機，同時也使用戶體驗有了質的飛躍，用戶無需刷新頁面即可獲取新的數據，而頁面也以一種更具有交互性的形式為用戶展現視圖，可以說這種變化對互聯網發展的貢獻是史

鼠標Drag/Drop事件-可視化設計器開放平臺系列（3）

defined jquery插件 我們 order 滾動 rar 生成 bubuko case 前面一文已經創建了一個Jquery插件，並在初始化時渲染了一個紅色的矩形，作為一個設計器，最常用的操作是直接從面板中將組件拖到畫布上生成實例，本文主要講述如何通過拖動組件來顯示。

學海無涯——人工智慧應用例項之寫作軟體的基本概念

公司技術培訓中提到了Auto Narrative Writing，即自動寫作。 目前，本人也僅是使用VBA生成SQL statement(Insert語句)，原理是字串拼接。 而這個自動寫作，顯然是更改級別的“字串拼接”了。先學習基礎吧。 ----------------------

簡單知識點例項之三：Bootstrap-Table和後臺進行百分百互動的簡單例項

這是一個針對前後臺互動的例子，可以直接套進專案中通暢執行。第二頁之所以資料不對，是因為例子畢竟沒有真正的後臺，所以資料不對。但是可以套入專案中，就正常了。 重點： 其中bootstrap-table有一個search:truse搜尋框的引數我沒有使用，而是自己寫了一個搜尋框，

簡單知識點例項之二：如何動態生成div框並且同時非同步載入資料

一、動態生成框並且同時ajax非同步請求資料 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <htm

javascript高階程式設計之---繼承

物件的繼承  1.繼承的思想：關鍵是將一個建構函式A的原型指向給另一個建構函式B的例項本身，那麼A例項將擁有（繼承）B例項的所有的屬性和方法（繼承在原型）；   2.原理：將一個建構函式A的原型指向給另一個建構函式B的例項本身，也就意味著A原型將繼承B例項本身擁有的所

javascript高階程式設計之--自執行函式

什麼是自執行函式？ 顧名思義.就是不用呼叫，自己自動就會執行的函式； 為什麼要用自執行函式？ 自執行函式內部是一個獨立的作用域，這樣就保持了一個相對獨立的名稱空間，避免汙染全域性作用域 怎麼建立自執行函式？ 寫法一:(function(param){…})(re—param)

【原創】Redis高階功能之 慢查詢

一、何為慢查詢？ 慢查詢功能可以有效地幫助我們找到 Redis 可能存在的瓶頸 要想理解慢查詢的定義是什麼，我們可以參見下圖。當我們在客戶端傳送命令給 Redis之後，Redis 需要對這些查詢進行排隊處理。如果這條查詢命令在內部執行的時間超過了已經配置好的時限，那麼這條命令（查詢）

JavaScript高階程式設計之客戶端檢測

瀏覽器檢測，是個很讓人頭痛但又必須要考慮的一個問題。畢竟市面上的瀏覽器廠商眾多，雖然有些標準化的東西約束著他們，但是有些東西，他們還是各自按自己的意願來。這其中以IE瀏覽器最為突出，它幾乎可以被稱之為萬惡之源。 瀏覽器檢測的方法有很多，這裡介紹的可能並不是全部，但基本上都是比較常用的方法。下邊我就來詳細介紹