`

页面拖拽元素原理及实现代码

阅读更多

今天总结下常见的拖拽效果的实现原理及场景应用,拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的

 

现在有多种实现方法,常用的有H5的拖放API和原生JS两种方法。

(1)HTML5提供专门的拖拽与拖放的API,在不考虑兼容的情况下,以后实现这类效果就不必乱折腾了

【兼容:IE9+和其他主流浏览器均支持,而IE8和早前版本均不支持draggable属性】

(2)原生JS实现

接下来我分开解释下

 

(1)H5的draggable属性实现

首先说下HTML5里新增的draggable属性

在html5中,默认<img.../>和设置了href的<a>是可拖动的,其他都需手动把元素的draggable属性设置为true

然后使元素携带数据应该为被拖动元素的ondragstart拖拽开始(开始拖动触发该事件)事件指定监听器,在监听器中让拖动操作可以携带数据。

之后为了让document接受放的动作,为documen的ondragover(拖拽结束)事件设定监听器,在监听器中取消document对拖动事件的默认行为。

然而,不同浏览器在元素拖到指定位置释放之后默认的动作是不同的(firefox释放后会跳转到新页面,chrome则没有任何动作),所以我们要取消拖放操作的默认动作,为document的ondrop绑定监听器

 

【简答通俗讲】就是:

H5允许对页面元素进行拖动,只要在元素的属性中加上draggable="true",就可以拖动了。

在拖动的同时,必须记录被拖动的元素,通过在元素上注册事件ondragstart即可实现,比如规定了一个img元素可以拖动,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素拖拽</title>
</head>
<body>
<img src="./01.jpg" draggble="true" id="picture" ondragstart="drag(event);">
<script>
    function drag(event) {
        event.dataTransfer.setData("Text",event.target.id);
        console.log(event.target.id)
    }
</script>
</body>
</html>

在拖动img的时候,drag函数就会把img的id属性记录在事件中,记录值的类型是Text。

【下一步】是规定哪些元素可以放置被拖动的img,比如一个div可以放置这个被拖动的img, 需要在这个div上定义一个事件:ondragover(被拖动元素进入本元素的范围内拖动时不断触发)。在这个事件中,需要阻止对事件的默认处理方式,其实就是硬性的加上一句:event.preventDefault()

<style type="text/css">
    .main{
        width: 200px;
        height: 300px;
        border: 1px solid red;
    }
</style>
<div class="main" ondragover="allowDrop(event);"></div>
    function allowDrop(event) {
        alert("进入范围")
        event.preventDefault();
    }

 这里通过运用ondragover触发事件,我们只要将图片拖拽到框里,便会提示已经入范围框

【下一步】要在容纳这个img的div中把这个img放到里面,当放置的时候,会触发ondrop事件(其他元素被放到了本元素时触发)。

(1)通过event.dataTransfer.getData("Text")来得到上面event.dataTransfer.setData("Text",ev.target.id)的img的id

(2)通过event.target.appendChild(document.getElementById(data))来把img放到div中,注意这里event.target指的是div,不是上面的img了。至此,页面的拖动完成了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素拖拽</title>
    <style type="text/css">
        .main{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            position: absolute;
            top: 300px;
            left: 300px;
        }
    </style>
</head>
<body>
<img src="./01.jpg" draggble="true" id="picture" ondragstart="drag(event);">
<div class="main" ondragover="allowDrop(event);" ondrop="drop(event)"></div>
<script>
    function drag(event) {
        event.dataTransfer.setData("Text",event.target.id);
        console.log(event.target.id)
    }
    function allowDrop(event) {
        console.log("进入范围")
        event.preventDefault();
    }
    function drop(event) {
        console.log("鼠标已松开")
        event.preventDefault();
        var data=event.dataTransfer.getData("Text");
        console.log(event.target)
        event.target.appendChild(document.getElementById(data));
    }
</script>
</body>
</html>

 

【W3实例讲解:】

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>拖放Demo</title>
    <style type="text/css">
        #div1 {
            width: 198px;
            height: 66px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <script type="text/javascript">
        function allowDrop(ev) {
            ev.preventDefault();
        }
        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }
        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>
<p>请把 W3School 的图片拖放到矩形中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="http://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />
</body>
</html>
 下面研究一下拖放事件的所有不同部分

 

 ①把元素设置为可拖放

首先:为了把一个元素设置为可拖放,请把 draggable 属性设置为 true:

 

<img draggable="true">
 ②拖放的内容 - ondragstart 和 setData()

 

然后,规定当元素被拖动时发生的事情。在上面的例子中,ondragstart 属性调用了一个 drag(event) 函数,规定拖动什么数据。

dataTransfer.setData() 方法设置被拖动数据的数据类型和值:

 

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

 

在本例中,数据类型是 "text",而值是这个可拖动元素的 id ("drag1")

③拖到何处 - ondragover

ondragover 事件规定被拖动的数据能够被放置到何处

默认地,数据/元素无法被放置到其他元素中。为了实现拖放,我们必须阻止元素的这种默认的处理方式。

这个任务由 ondragover 事件的 event.preventDefault() 方法完成:

 

event.preventDefault()
 ④进行放置 - ondrop

 

当放开被拖数据时,会发生 drop 事件。

在上面的例子中,ondrop 属性调用了一个函数,drop(event):

 

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

 

【代码解释:】

 1. 调用 preventDefault() 来阻止数据的浏览器默认处理方式(drop 事件的默认行为是以链接形式打开)

 2 .通过 dataTransfer.getData() 方法获得被拖的数据,将返回在 setData() 方法中设置为相同类型的任何数据

 3 .被拖数据是被拖元素的 id ("drag1")

 4 .把被拖元素追加到放置元素中

 

 

【更多实例】

来回拖放图片:在两个 <div> 元素之间来回拖放图像

 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>拖放Demo</title>
    <style type="text/css">
        #div1, #div2 {
            float: left;
            width: 198px;
            height: 66px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <script type="text/javascript">
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="http://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)"
         id="drag1"/>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

 

 

这里我再列个W3的例子:

<!DOCTYPE html>
<html class="no-js">

    <head>
        <meta charset="utf-8">
        <title>HTML5-draggable(拖放)</title>
        <style type="text/css">
            #div1, #div2 {float:left; width:100px; height:35px; 
             margin:10px;padding:10px;border:1px solid #aaaaaa;}
        </style>
        <script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /*
             * 虽然已经设定了img元素可被拖动,但是浏览器默认地,
             无法将数据/元素放置到其他元素中。
             * 如果有需要设置某些元素可接受被拖动元素,则要阻止它的默认行为,
             * 这要通过设置该接收元素的ondragover 事件,调用event.preventDefault() 方法
             */
            function allowDrop(ev) {
                ev.preventDefault(); //阻止默认行为
                
                //ev.target.id
                //此处ev.target是接收元素,通过事件被绑定在哪个元素即可区分
            }

            /*
             * 当该img元素被拖动时,会触发一个ondragstart 事件,
               该事件调用了一个方法drag(event)。
             */
            function drag(ev) {
                //ev.dataTransfer.setData() 方法设置被拖数据的数据类型(Text)和
                //值(被拖元素id),
                //该方法将被拖动元素的id存储到事件的dataTransfer对象内,
                //ev.dataTransfer.getData()可将该元素取出。
                //此处ev.target是被拖动元素
                ev.dataTransfer.setData("Text", ev.target.id); 
            }

            /*
             * 当被拖元素移动到接收元素,
             * 松开鼠标时(即被拖元素放置在接收元素内时)会出发ondrop事件
             */
            function drop(ev) {
                ev.preventDefault(); //阻止默认行为
                var data = ev.dataTransfer.getData("Text"); //将被拖动元素id取出
                ev.target.appendChild(document.getElementById(data)); 
                //将被拖动元素添加到接收元素尾部
            }
        </script>
    </head>

    <body>

        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
            <!--为了使元素可拖动,把 draggable 属性设置为 true--> 
            <img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" 
                 draggable="true" ondragstart="drag(event)" id="drag1" />
        </div>
        
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    </body>

</html>

  

 

接下来举个简单随意拖放例子:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>可拖动</title>
    <style type="text/css">
        #source{
            border: 1px solid #000000;
            background-color: #ccc;
            width: 80px;
            height: 80px;
        }
    </style>

</head>
<body>
<div id="source">
    HELLO WORLD。
</div>
<script type="text/javascript">
    var source = document.getElementById("source");
    source.ondragstart = function(evt){//ondragstart:开始拖动时触发
        //让拖动携带数据
        console.log(evt)
        evt.dataTransfer.setData("text/plain","www.fkjava.org");
    }
    document.ondragover = function(evt){
     //ondragover:被拖动元素进入本元素的范围内拖动时不断触发
        //取消事件的默认行为
        return false;
    }
    document.ondrop = function(evt){//ondrop:其他元素被放到了本元素时触发
        source.style.position = "absolute";
        source.style.left = evt.pageX + "px";
        source.style.top = evt.pageY + "px";
        //取消事件的默认行为
        return false;
    }
</script>
</body>
</html>

附:触发事件

ondragstart:开始拖动时触发

ondrag:拖动过程中不断触发

ondragend:拖动结束时触发

ondragenter:被拖动元素进入本元素的范围内时触发

ondragover:被拖动元素进入本元素的范围内拖动时不断触发

ondragleave:被拖动元素离开本元素时触发

ondrop:其他元素被放到了本元素时触发

 

【再来说下DataTransfer对象】

拖放触发的拖放事件有一个dataTransfer的属性,该属性值是一个DataTransfer对象(可以去chrome浏览器

控制台打印验证,这里我已经打印出来,打开控制台找打即可)

dataTransfer对象:提供了对于预定义的剪贴板格式的访问,以便在拖曳操作中使用。

通俗的讲就是在拖曳操作的过程中,我们可以用过dataTransfer对象来传输数据,以便在拖曳操作结束的时候对数据进行其他的操作。

 

【对象属性】

(1)dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败。该属性值只允许为“null”、“copy”、“link”和“move”四值之一。

(2)effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。

(3)items:该属性返回DataTransferItems对象,该对象代表了拖动数据。

(4)types:该属性返回一个DOMStringList对象,该对象包括了存入dataTransfer中数据的所有类型。

 

【对象方法】

(1)setData(format,data):将指定格式的数据赋值给dataTransfer对象,参数format定义数据的格式也就是数据的类型,data为待赋值的数据

(2)getData(format):从dataTransfer对象中获取指定格式的数据,format代表数据格式,data为数据。

(3)clearData([format]):从dataTransfer对象中删除指定格式的数据,参数可选,若不给出,则为删除对象中所有的数据。

(4)addElement(element):添加自定义图标

(5)setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标,x设置图标与鼠标在水平方向上的距离,y设置图标与鼠标在垂直方向上的距离。

下面展示一个允许通过拖动来添加,删除”收藏夹“功能

 

 

 

(2)原生JS实现

一、拖拽的流程动作

①鼠标按下

②鼠标移动

③鼠标松开

二、拖拽流程中对应的JS事件

①鼠标按下会触发onmousedown事件

obj.onmousedown = function(e) {  
      //..........  
} 

 ②鼠标移动会触发onmousemove事件

obj.onmousemove = function(e) {  
    //......  
}

 ③鼠标松开会触发onmouseup事件

obj.onmouseup = function() {  
     //......  
}

 三、实现的原理讲解

拖拽其实是通过获取鼠标移动的距离来实现的,即计算移动前的位置的坐标(x,y)与移动中的位置的坐标(x,y)差值。

当鼠标按下或鼠标移动时,都可以获取到当前鼠标的位置,即移动前的位置与移动中的位置。

那么上面①与②的代码就应该变成这样

var mouseDownX,mouseDownY  
// 因在移动中需计算鼠标的偏移需要用到鼠标按下时的坐标,固声明称全局变量  
obj.onmousedown = function(e) {  
    mouseDownX = e.pageX;  
    mouseDownY = e.pageY;  
}  
obj.onmousemove = function(e) {  
    var mouseMoveX = e.pageX,mouseMoveY = e.pageY;  
} 

 移动前与移动后坐标有了,那么计算偏移,先看下图

 

很明显移动后元素

X坐标为  鼠标移动后的X坐标 - 鼠标按下的X坐标 + 元素的初始X坐标

Y坐标为  鼠标移动后的Y坐标 - 鼠标按下的Y坐标 + 元素的初始Y坐标

把新的 X,Y 替换元素的 X,Y 就搞定了

那么代码就应该更换为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素拖拽</title>
    <style type="text/css">
        #link{
            position: absolute;
        }
    </style>
</head>
<body>
<p id='link'>我是可以拖拽的</p>
<script type="javascript">
    var obj = document.getElementById('link');
    var mouseDownX,mouseDownY,initX,initY,flag = false;  
    // 因在移动中需计算鼠标的偏移需要用到鼠标按下时的坐标,固声明称全局变量
    obj.onmousedown = function(e) {
    // e为鼠标事件对象,属性pageX为鼠标X坐标,pageY为鼠标Y坐标
        //鼠标按下时所在的X,Y坐标
        mouseDownX = e.pageX;
        mouseDownY = e.pageY;
        //初始位置的X,Y坐标
        initX = obj.offsetLeft;
        initY = obj.offsetTop;
        //鼠标被按下
        flag = true;
    }
    obj.onmousemove = function(e) {
       if(flag){//确认鼠标已按下
           var mouseMoveX = e.pageX,mouseMoveY = e.pageY;
           this.style.left = 
                  parseInt(mouseMoveX) - parseInt(mouseDownX) + parseInt(initX) + "px";
           this.style.top = 
                  parseInt(mouseMoveY) - parseInt(mouseDownY) + parseInt(initY) + "px";
       }else{//未按下鼠标}
    }
    obj.onmouseup = function() {
        //标识已松开鼠标
        flag = false;
    }
</script>
</body>
</html>

 经测试,拖动速度过快时会出现明显卡顿,这个之后再讨论性能优化

需要注意的事:

①如果用jquery库来写的话三个事件为mousedown、mousemove、mouseup,名称稍微有点差别。

②还有一点,被拖拽的元素的样式要设置成绝对或相对位置才有效果。

至此,最简单的元素拖拽功能就讲完了~~~~

如有不正确之处欢迎大家指正!

 

 

 

后续补充下,这里我们讨论下代码的优化:

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>元素拖拽</title>  
    <style type="text/css">  
        #xixi {  
            width:200px; height: 200px; position:absolute;  
            left: 50px; top: 50px; background-color: lightcyan;  
        }  
        #haha {  
            position:absolute; left:300px; top:300px;  
            background-color: yellow; width:200px; height: 200px;  
        }  
  
    </style>  
    <script type="text/javascript" src="js/mylib.js"></script>  
    <script type="text/javascript">  
        window.onload = function() {  
            var obj1 = createDraggableObject();  
            var obj2 = createDraggableObject();  
            obj1.init($('xixi'));  
            obj2.init($('haha'));  
        };  
    </script>  
  
</head>  
<body>  
    <div id="xixi">xixi!</div>  
    <div id="haha">haha!</div>  
</body>  
</html>  

 外部JavaScript文件代码如下所示:

/** 
 * 根据id获取页面元素 
 * @param id 
 * @returns {HTMLElement} 
 */  
function $(id) {  
    return document.getElementById(id);  
}  
  
/** 
 * 创建可拖拽对象的工厂方法 
 */  
function createDraggableObject() {  
    return {  
        obj: null, left: 0, top: 0,  
        oldX: 0, oldY: 0, isMouseLeftButtonDown: false,  
        init: function (obj) {  
            this.obj = obj;  
            var that = this;  
            this.obj.onmousedown = function (args) {  
                var evt = args || event;  
                this.style.zIndex = 100;  
                that.isMouseLeftButtonDown = true;  
                that.oldX = evt.clientX;  
                that.oldY = evt.clientY;  
                if (this.currentStyle) {  
                    that.left = parseInt(this.currentStyle.left);  
                    that.top = parseInt(this.currentStyle.top);  
                }  
                else {  
                    var divStyle = document.defaultView.getComputedStyle(this, null);  
                    that.left = parseInt(divStyle.left);  
                    that.top = parseInt(divStyle.top);  
                }  
            };  
            this.obj.onmousemove = function (args) {  
                that.move(args || event);  
            };  
            this.obj.onmouseup = function () {  
                that.isMouseLeftButtonDown = false;  
                this.style.zIndex = 0;  
            };  
        },  
        move: function (evt) {  
            if (this.isMouseLeftButtonDown) {  
                var dx = parseInt(evt.clientX - this.oldX);  
                var dy = parseInt(evt.clientY - this.oldY);  
                this.obj.style.left = (this.left + dx) + 'px';  
                this.obj.style.top = (this.top + dy) + 'px';  
            }  
        }  
    };  
}  

 

 最后展示一个实际应用:通过H5的draggable的APL实现----删除和收藏夹功能

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>通过拖放实现添加、删除</title>
    <style type="text/css">
        div>div{
            display:inline-block;
            padding: 10px;
            background-color: #aaa;
            margin: 3px;
        }
    </style>
</head>
<body>
<div style="width:600px;border:1px solid black;">
    <h2>可将喜欢的项目拖到收藏夹</h2>
    <div draggable="true" ondragstart="dsHandler(event);">勿忘心安</div>
    <div draggable="true" ondragstart="dsHandler(event);">照顾自己</div>
    <div draggable="true" ondragstart="dsHandler(event);">Number 9</div>
    <div draggable="true" ondragstart="dsHandler(event);">崇拜</div>
</div>
<div id="dest" style="width:400px;height:400px;border:1px solid black;float:left;">
    <h2 ondragleave="return false;">收藏夹</h2>
</div>
<div id="gb" draggable="false" style="width:100px;height:100px;
       border:1px solid red;float:left;">我是垃圾桶</div>
<script type="text/javascript">
    var dest = document.getElementById("dest");
    var dsHandler = function (evt){
        evt.dataTransfer.setData("text/plain","<item>"+evt.target.innerHTML);
    }

    dest.ondrop = function(evt){
        var text = evt.dataTransfer.getData("text/plain");
        if(text.indexOf("<item>") == 0){
            var newEle = document.createElement("div");
            newEle.id = new Date().getUTCMilliseconds();
            newEle.innerHTML = text.substring(6);
            newEle.draggable = "true";
            newEle.ondragstart = function(evt){
                evt.dataTransfer.setData("text/plain","<remove>"+newEle.id);
            }
            dest.appendChild(newEle);
        }
    }

    document.getElementById("gb").ondrop = function(evt){
        var id = evt.dataTransfer.getData("text/plain");
        if(id.indexOf("<remove>") == 0){
            var target = document.getElementById(id.substring(8));
            dest.removeChild(target);
        }
    }

    document.ondragover = function(evt){
        return false;
    }

    document.ondrop = function(evt){
        return false;
    }
</script>
</body>
</html>

 

 

 

 

 

.

 

分享到:
评论

相关推荐

    jQuery任意拖动页面中元素代码.zip

    "jQuery任意拖动页面中元素代码.zip"这个资源包含了一个名为DDSort.js的插件,这个插件允许用户在页面上自由地拖动元素,实现元素的排序功能,这在创建列表、网格或任何需要动态布局的项目时非常有用。 DDSort.js的...

    JQuery对元素拖拽排序,元素拖拽,JQuery拖拽Demo

    用JQuery写的拖动元素进行排序的方法,包含拖动排序、拖动移除、拖动添加。 代码完整可用。没有用到第三方插件,自主可控。 原理是用CSS中position定位来跟踪鼠标移动,就是让元素跟踪鼠标位置,然后判断其在页面...

    网页上元素拖动的实现,有近8个实例打包

    当用户点击并拖动元素时,我们记录下初始鼠标位置和元素当前位置,然后在`mousemove`事件中更新元素的位置,直到`mouseup`事件触发,结束拖动。 实例一:图片拖动。在图片上添加拖动功能,我们首先需要获取到图片...

    【JavaScript源代码】js拖拽效果的原理及实现.docx

    JavaScript中的拖拽效果是通过监听并处理鼠标事件来实现的,这一功能广泛应用于用户界面交互,如拖动排序、窗口拖动等。实现拖拽效果主要涉及到三个关键的鼠标事件:`onmousedown`、`onmousemove` 和 `onmouseup`。 ...

    通过拖拽的方法自动生成html

    1. **拖拽界面**:这类工具通常有一个大的设计区域,用户可以在这个区域内拖动各种网页元素,如文本框、图像、按钮、表格等。每个元素都有其对应的HTML标签,如`&lt;p&gt;`(段落)、`&lt;img&gt;`(图像)、`&lt;button&gt;`(按钮)...

    无边框页面拖拽拉大代码

    在IT行业中,无边框页面拖拽拉大是一种常见的用户界面(UI)设计技术,它允许用户通过拖动页面边缘来调整窗口大小,提供更灵活的视图体验。这种技术通常应用于桌面应用或Web应用中,尤其是那些需要展示大量内容或者...

    最新Js实现拖动效果代码

    - `mousemove`:当鼠标在页面上移动时触发,用于跟踪鼠标位置并更新被拖动元素的位置。 - `mouseup`:当用户释放鼠标按钮时触发,标志着拖动操作结束。 2. **数据存储**: - 需要存储拖动元素的初始位置,通常是...

    Cms拖拽实现拖拽生成页面

    【标题】:“Cms拖拽实现拖拽生成页面”这一技术是现代内容管理系统(CMS)中常见的一种交互设计,它允许用户通过简单的拖放操作来自由构建和编辑网站页面。这种功能大大降低了非技术人员创建和管理网站内容的门槛,...

    jQuery实现DIV元素拖动排序代码.rar

    本项目"jQuery实现DIV元素拖动排序代码"就是这样一个示例,它利用了HTML5的`&lt;section&gt;`标签和一个名为`jquery.sortable.js`的插件。 首先,HTML5的`&lt;section&gt;`标签是语义化的,用于组织文档的大块内容,例如章节、...

    js 元素拖拽效果

    在JavaScript(JS)中实现元素拖拽效果是一项常见的交互设计技术,它允许用户通过鼠标或触摸设备移动页面上的元素,从而提升用户体验。本教程将详细解释如何创建一个基本的元素拖拽功能,并演示如何将拖动的元素放入...

    jQuery 实现DOM元素拖拽交换位置的实例代码

    ### jQuery 实现 DOM 元素拖拽交换位置的原理和技术点 在网页中实现 DOM 元素的拖拽功能能够让用户通过直观的方式进行元素的排序、移动等操作,从而提升网站的交互性和用户体验。本文介绍利用 jQuery 库来实现 DOM ...

    html5 跨iframe的拖拽实现移动端页面设计器

    5. `dragover`:在拖动元素在目标上移动时频繁触发,通常用来取消默认的禁止放置效果。 6. `drop`:当拖动的元素被放下(释放)时触发,用于处理数据的放置。 在跨iframe的拖放实现中,我们需要解决的主要问题是...

    Web 前端拖拽实现实例分析

    例如,可以创建一个包含多个元素的界面,实现拖放、排序、限制拖放区域等功能,然后对比各个库的实现效果和性能。 总之,Web前端实现拖放功能有多种途径,从原生API到各种库和插件。选择合适的方案不仅关乎技术实现...

    拖放事件原理及实现详解

    拖放事件是HTML5引入的一种增强用户交互的重要特性,它允许用户通过拖动元素并在页面上的特定位置释放来实现数据交换或操作。在本篇文章中,我们将深入探讨拖放事件的原理以及如何在实践中实现这一功能。 拖放事件...

    页面 JS 拖拽效果。。。

    JS拖拽是指通过JavaScript实现的页面元素拖放效果,它可以允许用户通过鼠标操作页面上的元素,将其从一处拖动到另一处。在.NET环境下,虽然主要涉及后台编程,但可以通过与前端JS的配合实现拖拽功能。 JavaScript中...

    jQuery鼠标上下层拖动排序代码.zip

    同时,需要判断拖动元素与相邻元素的关系,以便在上下层之间正确地插入元素,保持排序的正确性。 "jiaoben6340"可能是源代码文件或示例文件,其中包含了实现拖动排序的具体逻辑。这个文件可能包括了绑定事件处理...

    JQuery实现鼠标拖动元素移动位置(源码+注释)

    本篇文章将详细讲解如何使用jQuery实现鼠标拖动元素并改变其位置的功能,这对于构建交互式用户界面至关重要。 首先,我们需要在HTML页面中引入jQuery库。这通常通过在`&lt;head&gt;`标签内添加以下代码来完成: ```html ...

    .net js代码实现div拖拽功能

    需要注意的是,这个简单的实现可能不会处理页面滚动、边界限制或与其他元素的碰撞检测等复杂情况。在实际应用中,你可能需要对代码进行扩展以适应更复杂的需求。 此外,虽然这个示例没有直接涉及.NET技术,但你可以...

    拖动页面滑动

    在JavaScript编程领域,"拖动页面滑动"是一种常见的用户...在压缩包中的"做好的页面拖动"文件,可能是包含了实现这种效果的代码示例,通过查看和学习这些代码,开发者能够深入理解如何在JavaScript中实现拖动滑动功能。

    jquery div容器拖拽放大缩小浮动层代码

    本示例中的“jquery div容器拖拽放大缩小浮动层代码”是一个利用jQuery实现的功能,允许用户对div元素进行拖动、缩放以及使其在页面上浮动。下面将详细介绍这一功能的实现原理和相关知识点。 1. **jQuery选择器**:...

Global site tag (gtag.js) - Google Analytics