HTML+CSS+JS 實現DIV豎向拖拽

阿新 • • 發佈：2019-01-19

最近寫專案遇到一個業務需求，需要實現div的豎向推拽排序。

在參考了文章《Html+css實現拖拽導航條》後，自己做了一些修改，最終實現了div的豎向拖拽。

程式碼如下：

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8">

    <title>div拖拽</title>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 

    <style type="text/css">

        body, div {
            padding: 0px;
            margin: 0px;
        }

        .box {
            position: relative;
            width: 100%;
            border: #A8A8A8 solid 1px;
        }

        .box ul{
            list-style: none;
            overflow: hidden;
            padding: 0;
            margin:0;
        }

        .drag {
            border: #A8A8A8 solid 0.5px;
            border-width: 0 0 1px 0;
            text-align: center;
        }

        .box ul li a{
            display: block;
            text-decoration:none;
            padding: 10px 25px;
        }

        .drag-dash {
            position: absolute;
            width: 100%;
            border: #000 solid 1px;
            background: #ececec;
            text-align: center;
        }

        .dash {
            width: 100%;
            border: 1px solid transparent;

        }

    </style>

</head>

<body>

<h1>div豎向拖拽</h1>

<div class="box">

    <ul>

        <li class="drag"><a href="#">規則一</a></li>

        <li class="drag"><a href="#">規則二</a></li>

        <li class="drag"><a href="#">規則三</a></li>

        <li class="drag"><a href="#">規則四</a></li>

        <li class="drag"><a href="#">規則五</a></li>

    </ul>

</div>

 

<script type="text/javascript">
$(document).ready(function () {
    var range = {x: 0, y: 0};//滑鼠元素偏移量
    var lastPos = {x: 0, y: 0, x1: 0, y1: 0}; //拖拽物件的四個座標
    var tarPos = {x: 0, y: 0, x1: 0, y1: 0}; //目標元素物件的座標初始化
    var theDiv = null, move = false;
    var choose = false; //拖拽物件 拖拽狀態 選中狀態
    var theDivId = 0, theDivHeight = 0, theDivHalf = 0;
    var tarFirstY = 0; //拖拽物件的索引、高度、的初始化。
    var tarDiv = null, tarFirst, tempDiv; //要插入的目標元素的物件, 臨時的虛線物件
    var initPos = {x: 0, y: 0};
    var theDivWidth;//拖拽物件的寬度
    $(".drag").each(function () {

        $(this).mousedown(function (event) {
            console.log("mousedown");
            choose = true;

            //拖拽物件

            theDiv = $(this);

            //記錄拖拽元素初始位置

            initPos.x = theDiv.position().left;

            initPos.y = theDiv.position().top;

            //滑鼠元素相對偏移量

            range.x = event.pageX - theDiv.position().left;

            range.y = event.pageY - theDiv.position().top;

            theDivId = theDiv.index();

            theDivWidth = theDiv.width();

            //記錄高度
            theDivHeight = theDiv.height();

            theDivHalf = theDivHeight / 2;

            theDiv.removeClass("drag");

            theDiv.addClass("drag-dash");

            theDiv.css({left: initPos.x + 'px', top: initPos.y + 'px'});

            // 建立新元素 插入拖拽元素之前的位置(虛線框)

            $("<div class='dash'></div>").insertBefore(theDiv);

            tempDiv = $(".dash");

            $(".dash").css("height", theDivHeight);

            return false

        });

    });
    $(document).mouseup(function (event) {
        console.log("mouseup");
        if (!choose) {

            return false;

        }

        if (!move) {

            //恢復物件的初始樣式

            theDiv.removeClass("drag-dash");

            theDiv.addClass("drag");


            tempDiv.remove(); // 刪除新建的虛線div

            choose = false;

            return false;

        }

        theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虛線div的位置上

        //恢復物件的初始樣式

        theDiv.removeClass("drag-dash");

        theDiv.addClass("drag");

        tempDiv.remove(); // 刪除新建的虛線div

        move = false;

        choose = false;

        return false

    }).mousemove(function (event) {
        console.log("mousemove");
        if (!choose) {
            return false
        }
        move = true;
        lastPos.x = event.pageX - range.x;
        lastPos.y = event.pageY - range.y;
        lastPos.x1 = lastPos.x;
        lastPos.y1 = lastPos.y + theDivHeight;
        // 拖拽元素隨滑鼠移動
        theDiv.css({left: lastPos.x + 'px', top: lastPos.y + 'px'});

        // 拖拽元素隨滑鼠移動 查詢插入目標元素

        var $main = $('.drag'); // 區域性變數：按照重新排列過的順序 再次獲取 各個元素的座標，

        $main.each(function () {

            tarDiv = $(this);

            tarPos.x = tarDiv.position().left;

            tarPos.y = tarDiv.position().top;

            tarPos.y1 = tarPos.y + tarDiv.height() / 2;

            tarFirst = $main.eq(0); // 獲得第一個元素\

            tarFirstY = tarFirst.position().top + theDivHalf; // 第一個元素物件的中心縱座標

            //拖拽物件 移動到第一個位置

            if (lastPos.y <= tarFirstY) {

                tempDiv.insertBefore(tarFirst);

            }

            //判斷要插入目標元素的 座標後， 直接插入

            if (lastPos.y >= tarPos.y - theDivHalf && lastPos.y1 >= tarPos.y1) {

                tempDiv.insertAfter(tarDiv);

            }

        });

        return false

    });

});

</script>

</body>

</html>

HTML+CSS+JS 實現DIV豎向拖拽

最近寫專案遇到一個業務需求，需要實現div的豎向推拽排序。在參考了文章《Html+css實現拖拽導航條》後，自己做了一些修改，最終實現了div的豎向拖拽。程式碼如下：<!DOCTYPE HTML> <html> <head>

使用html+css+js實現簡易計算器

使用html+css+js實現簡易計算器，效果圖如下： html程式碼如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-

html,css,js實現簡單的頁面應用

主要實現三個方面(主頁，登陸頁，註冊頁，新聞詳情頁) 主頁包括（上面的導航欄，中間資訊分類，資訊詳情和資訊推薦） 1.主頁 <!DOCTYPE html> <html lang="en"> <head> <met

html + css + js 實現摺疊選單的方法

1. 套用模板，將選單的相關資訊直接放在指令碼資料中，使用迴圈生成 <script id="templateNavBar" type="text/html"> <div class="nav-bar-logo"> </div&

html+css+js實現的簡易下拉選單

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ page language="java" contentType="text/html; charset

html+css+js實現選項卡切換

html+css+js選項卡原理：先把所有的隱藏，再把當前的顯示出來效果如下：一、Html頁面佈局 Html頁面佈局由三個按鈕（input）和三個div組成，三個按鈕中總有一個

HTML,CSS,JS實現網頁聊天視窗

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me

用html+css+js實現選項卡切換效果

window.onload = function () { chang(); var myTab = document.getElementById("gameDevelopment"); //整個div var myUl = myTab.getElementsByTagName("ul")[0];//一個

JS實現div塊的拖放，調換位置

主要是HTML5 的拖放（Drag 和 Drop）例子（不需要對div設定ID）： <!DOCTYPE HTML> <html> <head> &l

HTML+CSS+JS實現透明度動畫

1.box.html程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

用html+css+js實現中國象棋小遊戲開發專案

var game={ RN:10,//行數 CN:9,//列數 CSIZE:40,//每個單元格大小 OFFSET:20,//單元格區域距離最外層邊界的距離， URL:"images/chess.png",//儲存所有棋子的圖片地址 data:null,//實時儲存棋盤中棋子的物件 chessP

HTML+CSS+JS實現輪播效果

1.lunbo.html程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>大輪播</tit

html+css+js實現網頁拼圖遊戲

拒絕 ini 定位 start 每次網頁 global append 打亂數組代碼地址如下：http://www.demodashi.com/demo/14449.html 項目描述使用 html+js+css 實現一個網頁拼圖遊戲，可支持簡單，中等，困難三種難度

基於svg.js實現對圖形的拖拽、選擇和編輯操作

鼠標移出 strong lse 方便 jquery cap .cn sta plot 本文主要記錄如何使用 svg.js 實現對圖形的拖拽，選擇，圖像渲染及各類形狀的繪制操作。 1、關於SVG SVG 是可縮放的矢量圖形，使用XML格式定義圖像，可以生成對應的DOM節點，便

js實現頁面左右上下拖拽

function Move_obj(obj,col) { var zmove = false; var D = new Function('obj', 'return document.getElementsByClassName("ky-bodys act

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

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

js實現頁面中的拖拽運動

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

JS+CSS簡單實現DIV遮罩層顯示隱藏【轉藏】

button left dtd -m javascrip htm width dex absolute <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

HTML+CSS+JS簡單實現支付寶付款界面效果

6.5 body pre -c css brush ges line col HTML+JS部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

html/css/js-橫向滾動條的實現

位置 htm block button 技術分享代碼遇到 itl spa 在前端UI設計時，網頁的制作很麻煩，深有感悟！碰到太多的不懂，或是第一次見，就要去網上找資料！橫向滾動條就是我遇到麻煩中其中的一個，其實也很簡單，只是在幾次項目中都用到了這個橫向滾動條

HTML+CSS+JS 實現DIV豎向拖拽

相關推薦