【JavaScript】實現元素拖拽和碰撞檢測

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

function drag() {
    var src1 = document.getElementById("src-1");
    var src2 = document.getElementById("src-2");
    var src3 = document.getElementById("src-3");

    var srcs = [src1, src2, src3];

    var dest1 = document.getElementById("dest-1");
    var dest2 = document.getElementById("dest-2" 
);
    var dest3 = document.getElementById("dest-3");

    var drag;
    var x, y;

    srcs.forEach(function(item) {
        item.onmousedown = function(e) {
            var event = e || window.event;
            var target = event.target || event.srcElement;
            x = event.clientX - target.offsetLeft;
            y = event.clientY - target.offsetTop;
            drag = target;
        }
    });

    document.onmousemove = function 
(e) {
        if (drag) {
            event = e || window.event;

            var left = event.clientX - x;
            var top = event.clientY - y;
            body = document.documentElement || document.body;
            if (left < 0) left = 0;
            if (left > body.offsetWidth - drag.offsetWidth) left = body.offsetWidth - drag.offsetWidth;
            if 
 (top < 0) top = 0;
            if (top > body.offsetHeight - drag.offsetHeight) top = body.offsetHeight - drag.offsetHeight;

            drag.style.left = left + 'px';
            drag.style.top = top + 'px';
        }
    }

    document.onmouseup = function(e) {
        if (drag) {
            if (drag == src1) {
                handler(src1, dest1);
            } else if (drag == src2) {
                handler(src2, dest2);
            } else {
                handler(src3, dest3);
            }
        }
        drag = null;
    }

}

function handler(src, dest) {
    if (acreage(src, dest) == 0) { //未重合
        if (src.getAttribute("id") == "src-1") {
            src.style.left = "10px";
            src.style.top = "50px";
        } else if (src.getAttribute("id") == "src-2") {
            src.style.left = "10px";
            src.style.top = "150px";
        } else {
            src.style.left = "10px";
            src.style.top = "250px";
        }

    } else if (acreage(src, dest) > dest.offsetHeight * dest.offsetWidth * 2 / 3) { //重合超過2/3
        src.style.left = dest.style.left;
        src.style.top = dest.style.top;
        src.onmousedown = null;
    }
}

function acreage(node1, node2) {
    // 計算重合面積
    return 0;
}

drag();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }

    html {
        height: 100%;
    }

    body {
        height: 100%;
        min-width: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pos {
        width: 50px;
        height: 50px;
        position: absolute;
        color: black;
        line-height: 50px;
        text-align: center;
        font-size: 25px;
        cursor: pointer;
        user-select: none;
    }

    .dest {
        border-color: black;
        border-width: 1px;
        border-style: solid;
    }

    #src-1 {
        top: 50px;
        left: 10px;
        background-color: yellowgreen;
        z-index: 100;
    }

    #src-2 {
        top: 150px;
        left: 10px;
        background-color: yellow;
        z-index: 100;
    }

    #src-3 {
        top: 250px;
        left: 10px;
        background-color: green;
        z-index: 100;
    }

    #dest-1 {
        top: 250px;
        right: 10px;
    }

    #dest-2 {
        top: 150px;
        right: 10px;
    }

    #dest-3 {
        top: 50px;
        right: 10px;
    }

    .success {
        line-height: 50px;
        height: 50px;
        font-size: 30px;
        text-align: center;
        color: red;
        background-color: black;
        padding: 25px;
        display: none;
    }

    .title {
        text-align: center;
        font-size: 20px;
        position: absolute;
        top: 10px;
    }
    </style>
</head>

<body>
    <div class="title">標題</div>
    <div class="pos src" id="src-1">1</div>
    <div class="pos src" id="src-2">2</div>
    <div class="pos src" id="src-3">3</div>
    <div class="pos dest" id="dest-1">1</div>
    <div class="pos dest" id="dest-2">2</div>
    <div class="pos dest" id="dest-3">3</div>
    <div class="success" id="success">拼圖完成</div>
    <script type="text/javascript" src="test3.js"></script>
</body>

</html>

【JavaScript】實現元素拖拽和碰撞檢測

function drag() { var src1 = document.getElementById("src-1"); var src2 = document.getElementById("src-2"); var src3 =

swing實現窗體拖拽和拉伸

當用setUndecorated(true) 後 JFrame去掉標題欄後就得自己寫拖拽和拉伸功能了。下面是效果圖，我的截圖軟體不能夠擷取除系統預設游標外的游標，所以各個方向游標變化在圖中沒有體現程式碼如下：import javax.swing.*; import java.

js面向物件實現元素拖拽

window.onload = function(){ var obox = new Drag('box'); var obox1 = new Cdrag('box1'); obox.in

【JavaScript】實現複選框的全選、全部不選、反選

以較為簡潔的程式實現複選框的全選、全部不選、反選操作。並且將可變的部分設定為JS的引數，以實現程式碼複用。全選和全不選第一個引數為複選框名稱，第二個引數為是全選還是全部不選。 function allCheck(name,boolValue) { var all

【JavaScript】函式的引數傳遞和遞迴呼叫

引數傳遞傳遞函式這裡主要分享下，如果將一個函式作為引數進行傳遞 function box(sum,num3) //把函式本身作為引數傳遞，而不是函式的返回值 { return sum(num3); } functio

【前端】js+php實現圖片拖拽上傳

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽圖片上傳</title> </head> <body>

【IOS】實現IOS版的抽屜效果（點選，拖拽滑動）

原文連結：http://blog.csdn.net/toss156/article/details/7400065 好像最近，看到好多Android上的抽屜效果，也忍不住想要自己寫一個。在Android裡面可以用SlidingDrawer，很方便的實現。IOS上面就只有自

【Javascript】call 和aplly

方法的參數 call ava apply 調用 javascrip bsp 方法 rip apply和call是Function類型的原型函數。所有的函數都會自動繼承這兩個方法。 func.apply(thisArg, [argsArray])func.call(thisA

【JavaScript】JavaScript(V8)實現輸入輸出

https func split 舉例 tps blog turn 輸出 ret 首先看牛客網的樣例：https://www.nowcoder.com/questionTerminal/dae9959d6df7466d9a1f6d70d6a11417 計算a+b的和，每行包

【JavaScript】read_line()、print()實現輸入輸出

包含 col line div () parseint 一個 print split /*輸入輸入的第一行為一個正整數T，表示有T組測試數據。隨後的T行中，每行為一組測試數據。每組測試數據包含由3個正整數構成，分別為N、M和a，其中1<=N, M, a <

線性代數-矩陣-【5】矩陣化簡 C和C++實現

tar tput c++ spec 但是 exc c++語言 emp opened 點擊這裏可以跳轉至【1】矩陣匯總：http://www.cnblogs.com/HongYi-Liang/p/7287369.html 【2】矩陣生成：http://www.cnblog

【javascript】正則表達式match、exec和test的使用

p s 下標 mat http [0 使用 regex es2017 false 正則表達式match、exec和test的使用 match和exec在匹配成功時返回的都是數組，在沒有匹配上時返回的都是null；test在匹配成功是返回true，在沒有匹配時返回的是fals

【JavaScript】使用Async 和 Promise 完美解決回調地獄

get 不用操作調用地獄 edi div null 多重很久以前就學習過Async和Promise，但總是一知半解的。今天在寫NodeJS的時候，發現好多第三方庫使用回調，這樣在實際操作中會出現多重回調，這就是傳說中的JS回調地獄。舉個例子有一個方法調用

【HTML+CSS+JavaScript】實現待辦事項（純DOM實現）

todolist ive relative spa java set 釣魚 scrip input 需求：實現待辦事項 <!DOCTYPE html> <html lang="en"> <head> <meta chars

【HTML+CSS+JavaScript】實現地址選擇聯動

div chang city UNC padding () 定義 html 寧波需求：實現地址選擇聯動 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

【JavaScript】Bom物件和Dom物件

BOM:Browser Object Model(瀏覽器物件模型) 就是在JS程式碼中可以直接使用的物件，但是物件都是和瀏覽器有關的 Example: <script> window.close(); </script> (1)Wi

【java】實現Comparable介面和Comparator介面，並重寫compareTo方法和compare方法

實現Comparable介面和Comparator介面，並重寫compareTo方法和compare方法 2016年08月11日 14:39:25 蘇尹閱讀數：10772更多個人分類：學習筆記實體類:java.lang.Comparable(介面) + coma

安卓實現任意控制元件view可拖拽，並監聽拖拽和點選事件，可自動拉回螢幕邊緣

因為專案中有需要實現控制元件可任意拖拽的需求，所以簡單寫了個自定義OnTouchListener，以作拋磚引玉，歡迎大家提議反饋。完整實現類如下，程式碼中有詳細註釋：使用者可以決定是否開啟自動拖拽邊緣功能，可以監聽控制元件的拖拽和點選事件 public cl

【JavaScript】真正實現網頁字型大小跟隨螢幕變化而變化

方法一：使用媒體查詢Media獲取螢幕寬度，根據不同螢幕下情況，給元素賦值不同字型大小， @media screen and (min-width:640px){ .IRYFloat P{ font-size

【JavaScript】用JavaScript實現一個集合

add(value) ：向集合新增一個新的項。 delete(value) ：從集合移除一個值。 has(value) ：如果值在集合中，返回 true ，否則返回 false 。 clear() ：移

【JavaScript】實現元素拖拽和碰撞檢測

相關推薦