原生javaScript實現拖拽功能

阿新 • • 發佈：2018-12-01

<head>
    <meta charset="utf-8">
    <title>拖拽效果</title>
    <style type="text/css">
        .drag_main{
            width:50px;
            height:50px; 
            position: absolute;
            top:10px;
            left:10px;
        }
        .drag_main img{
            width 
:50px;
            height:50px;
        }
    </style>
</head>
<body>
    <div class="drag_main" id="dragImg" draggable="true"><img  src="dargImg.png"></div>
</body>
<script type="text/javascript">
    //原生js實現
    //querySelector() 匹配指定 CSS 選擇器的一個元素。
    var dragImg = document.querySelector("#dragImg" 
);
    var x,y; 
    dragImg.addEventListener('dragstart', (e) =>{
        console.log("start e",e);
        //dataTransfer儲存拖拽到瀏覽器的資料
        e.dataTransfer.effectAllowed = "move"; 
        e.dataTransfer.setData("text",'');
        x = e.offsetX || e.layerX;
        y = e.offsetY || e.layerY;
        return 
 true;
    },false)

    document.addEventListener('dragover', (e) =>{
        //取消事件的預設動作和停止事件的傳播
        e.preventDefault() || e.stopPropagation(); 
    },false)

    document.addEventListener('drop', (e) =>{
        console.log("drop e",e);
        dragImg.style.left = (e.pageX - x) + 'px';
        dragImg.style.top = (e.pageY - y) + 'px';
        e.preventDefault() || e.stopPropagation();
    },false)

</script>

原生javaScript實現拖拽功能

<head> <meta charset="utf-8"> <title>拖拽效果</title> <style type="text/css"> .drag_main{

JavaScript實現拖拽預覽，AJAX小文件上傳

strong 名稱獲取文件是否 set 可能 lis idt scrip 本地上傳，提前預覽（圖片。視頻） 1.html中div標簽預覽顯示。button標簽觸發上傳事件。 <div id="drop_area" style=

用javascript實現拖拽帶來的種種問題(1)

round head 出發 mark mov 點擊事件 pan func 屬性第一篇，先水一下，用javascript實現簡單的拖拽。主要還是想通過demo的形式總結一下各種event對象屬性。首先先看一下，這個demo最終實現的效果：主要涉及的屬性有： Mouse

原生js實現拖拽事件

ons window mov .get end ret htm 坐標 document <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

sortable實現拖拽功能

使用sortable這個強力外掛就很容易實現拖拽功能，它是目前比較牛逼的拖拽外掛，無需jquery，就可以全面支援pc和移動，參考以下github文件就有很詳細的說明，也給了很多 demo，外掛就用我給你的那個就可以，不用額外新增其他庫 GitHub：https://github.com/RubaXa/

js實現拖拽功能

<!doctype html> <html> <head> <meta charset="utf-8"> <title>拖拽功能&

面向物件+jquery實現拖拽功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style

ztree實現拖拽功能

1.屬性配置 leaf: true, 表示葉子節點不能變成根節點。parent: true 表示根節點不能變成葉子節點 edit: {drag:{isCopy: false,isMove: tr

Unity學習之實現拖拽功能

public class NewBehaviourScript : MonoBehaviour {public Vector3 screenPosition;public Vector3 position;public Vector3 tempPosition;//以下實現

JavaScript實現拖拽元素對齊到網格（每次移動固定距離）

做了一個gif圖，可以看到，每次元素的移動都是按照最小單位距離移動的。且每次元素都是對齊到網格的。先根據demo說明一下思路和細節，後面會給出demo程式碼。 1. 確定元素的每次移動的最小單位（demo中為10px和10px），也就是每次水平或垂直的位移量都是10px。鋪上一層網格背景是為了幫助

用原生JS實現HTML5的元素拖拽功能

昨天遇到的一個面試題，題目是這樣的：頁面上有個元素A和帶放置元素B，實現將A拖拽並且下放到B，然後改變B的顏色。以下都是廢話，抒發一下心情請跳過，直接看程式碼吧昨天寫的比較簡陋，今天想想在寫一遍做個記錄，越來越感受到每次面試都是一次很好的學習的機會。發現自己的不足，然後繼續前

jquery實現對div的拖拽功能

func function .org absolut 移動 posit center sed fun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

通過 JS 實現簡單的拖拽功能並且可以在特定元素上禁止拖拽

如何 alt targe 但是 mes 並且 mod closed demo 前言關於講解 JS 的拖拽功能的文章數不勝數，我確實沒有必要大費周章再寫一篇重復的文章來吸引眼球。本文的重點是講解如何在某些特定的元素上禁止拖拽。這是我在編寫插件時遇到的問題，其實很多插件的拖

原生javascript實現檔案上傳功能程式碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini

原生javascript實現分頁效果+搜尋功能

一、概述首先，我們要明確為何需要分頁技術，主要原因有以下： 1、分頁可以提高客戶體驗度，適當地選擇合適的資料條數，讓頁面顯得更有條理，使得使用者體驗感良好，避免過多資料的冗餘。 2、提高效能的需要。為何需要搜尋技術，主要原因有以下： 1、搜尋功能，能準確的根據使用

多個Popupwindow同時彈出時實現分別拖拽功能

Popupwindow一般預設點選彈窗外區域，視窗即消失，這與一條語句有關：popupWindow.setBackgroundDrawable(new BitmapDrawable()) 將此語句刪掉即可取消這個功能然而要實現多個Popupwindow可分別拖拽，還要在

Android中Drag and Drop拖拽功能的使用1-----基本實現

Android中的拖拽功能是有自帶的api的；（很多時候會誤以為要自定義控制元件，所以我放到了，自定義目錄下）參考文件： http://www.android-doc.com/guide/topics/ui/drag-drop.html 我寫了一個例子分析: 效果圖：思路： 1主要

檔案拖拽功能視窗實現

今天在使用迅雷軟體播放影片時，覺得這個拖拽播放的功能還不錯，想著自己能否實現一個具備檔案拖拽功能的視窗呢，查看了下MSDN，原來視窗接受檔案需要處理WM_DROPFILES訊息。 WM_DROPFILES訊息 MSDN中訊息的語法： PostMessa

easyUI拖拽功能講解以及多選拖拽的實現

首先我們考慮這樣一個業務場景：一個維修部門中分了N個維修組，維修部門的負責人需要將這個部門的維修人員分配到這些組裡去。當然，他可以選中一個維修人員，然後給他分配維修組，但是從人性化角度考慮，若利用拖拽是否更加的快捷和明確呢？比如我們可以將維修組和維修人員都列出來，然後只

vb.net 實現無標題欄窗體拖拽功能

<pre name="code" class="vb">'較好用，沒有閃動 Declare Auto Function ReleaseCapture Lib "user32.dll" Alias "ReleaseCapture" () As Boolea

原生javaScript實現拖拽功能

相關推薦