html drag拖拽事件-js教程-PHP中文网

在html中，事件的处理都是在js中完成的，html,js和css是密不可分的。下面就是在js中处理拖拽事件的例子。

拖拽事件分两大块，一块是对拖拽的目标上的处理(即拖动目标)；一块是对拖拽到的目标上的处理(即释放目标)。

在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发

ondrag - 元素正在拖动时触发

ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

实现代码如下：box1和lists可以相互拖拽

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

nbsp;html>


    <meta>
    <title>Title</title>
    <style>
        #box1{width: 200px;height: 250px;border:2px solid red;}
        #lists{ width:200px; height:250px; list-style: none;padding: 0;margin: 10px 0px; border:2px solid blue;}
        li{width: 150px;height: 30px; margin: 5px 0; padding:0;background: #ccc; line-height:30px;text-align: center ;}
    </style>
    <script>
        window.onload=function () {
            var box1=document.getElementById("box1");
            var lists=document.getElementById("lists");
            var lis=document.getElementsByTagName("li");
            for(var i=0;i<lis.length;i++){
                lis[i].draggable=true;
                lis[i].flag=false;
                //1、拖拽开始
                lis[i].ondragstart=function () {
                    this.flag=true;
                }
                //2、拖拽移动
                 two.ondrag=function () {

                }
                //3、拖拽结束
                lis[i].ondragend=function () {
                    this.flag=false;
                }
            }
            //投放区事件
            //1、进入投放区
            box1.ondragenter=function (e) {
                e.preventDefault();
            }
            //2、在投放区内移动
            box1.ondragover=function (e) {
                e.preventDefault();
            }
            //3、离开投放区
            box1.ondragleave=function (e) {
                e.preventDefault();
            }
            //4、完成投放 此时可以在投放区内做处理
            box1.ondrop=function (e) {
                e.preventDefault();
                for(var i=0;i<lis.length;i++){
                    if(lis[i].flag){
                        box1.appendChild(lis[i]);
                    }
                }
            }

            lists.ondragenter=function (e) {
                e.preventDefault();
            }
            lists.ondragover=function (e) {
                e.preventDefault();
            }
            lists.ondragleave=function (e) {
                e.preventDefault();
            }
            lists.ondrop=function (e) {
                e.preventDefault();
                for(var i=0;i<lis.length;i++){
                    if(lis[i].flag){
                        lists.appendChild(lis[i]);
                    }
                }
            }
        }
    </script>
    <p></p>