web 拖动

来源：互联网发布：金融程序员是做什么的编辑：程序博客网时间：2024/06/04 19:22

<!DOCTYPE html><!--This is a starter template page. Use this page to start your new project fromscratch. This page gets rid of all links and provides the needed markup only.--><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>拖动</title>    <!-- Tell the browser to be responsive to screen width -->    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">    <!-- Font Awesome -->    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">    <!-- Ionicons -->    <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">    <!-- Theme style -->    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter          page. However, you can choose any other skin. Make sure you          apply the skin class to the body tag so the changes take effect. -->    <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    <!--[if lt IE 9]>    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]-->    <!-- Google Font -->    <link rel="stylesheet"          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">    <style>        body{            background-color：#ddd;            font-family：arial,verdana,sans-serif;        }        #drop1{            width:200px;            height:200px;            border:1px solid black;            background-color:white;        }        #drag1{            width:50px;            height:50px;            background-color:black;        }    </style>    <script>        function allowDrop(ev)        {            ev.preventDefault();        }        function drag(ev)        {            ev.dataTransfer.setData("Text", ev.target.id);                    }        function drop(ev)        {            var data = ev.dataTransfer.getData("Text");            ev.target.appendChild(document.getElementById(data));            ev.preventDefault();        }        window.onload = function () {            var dragged = document.getElementById("drag1");            var drophere = document.getElementById("drop1");            dragged.ondragstart = drag;            drophere.ondragover = allowDrop;            drophere.ondrop = drop;        }    </script></head><!--BODY TAG OPTIONS:=================Apply one or more of the following classes to get thedesired effect|---------------------------------------------------------|| SKINS         | skin-blue                               ||               | skin-black                              ||               | skin-purple                             ||               | skin-yellow                             ||               | skin-red                                ||               | skin-green                              ||---------------------------------------------------------||LAYOUT OPTIONS | fixed                                   ||               | layout-boxed                            ||               | layout-top-nav                          ||               | sidebar-collapse                        ||               | sidebar-mini                            ||---------------------------------------------------------|--><body>    <div class="" id="drop1" ></div>    <p>Drag the image blow into the box above</p>    <div id="drag1" draggable="true">    </div>    <!-- REQUIRED JS SCRIPTS -->    <!-- jQuery 3 -->    <script src="bower_components/jquery/dist/jquery.min.js"></script>    <!-- Bootstrap 3.3.7 -->    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>    <!-- AdminLTE App -->    <script src="dist/js/adminlte.min.js"></script>    <!-- Optionally, you can add Slimscroll and FastClick plugins.         Both of these plugins are recommended to enhance the         user experience. --></body></html>

上面是基于javascript的拖动

有三个函数来完成

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

这个函数在拖动开始时执行，把dataTransfer属性设置为拖动元素的id

function allowDrop(ev)
{
ev.preventDefault();
}

这个函数在拖动元素经过放置区域时执行，作用是阻止放置区域执行默认操作（默认不允许拖动）

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

这个函数会在元素被放下时执行，会读取dataTransfer属性的值来拖动元素的id，把这个元素设置为被放置的子元素。

但是略微有点麻烦，用JQuery会简单点

$("#draggable").draggable();

就让一个元素成为了可拖动元素。

$("#drappable").droppable();

让一个元素成为可放置元素。

可放置元素的属性

drop:function(){}

out:function(){}

<!DOCTYPE html><!--This is a starter template page. Use this page to start your new project fromscratch. This page gets rid of all links and provides the needed markup only.--><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>拖动</title>    <!-- Tell the browser to be responsive to screen width -->    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">    <!-- Font Awesome -->    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">    <!-- Ionicons -->    <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">    <!-- Theme style -->    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter          page. However, you can choose any other skin. Make sure you          apply the skin class to the body tag so the changes take effect. -->    <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    <!--[if lt IE 9]>    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]-->    <!-- Google Font -->    <link rel="stylesheet"          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">    <!-- REQUIRED JS SCRIPTS -->    <!-- jQuery 3 -->    <script src="bower_components/jquery/dist/jquery.min.js"></script>    <!-- Bootstrap 3.3.7 -->    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>    <!-- AdminLTE App -->    <script src="dist/js/adminlte.min.js"></script>    <!-- Optionally, you can add Slimscroll and FastClick plugins.         Both of these plugins are recommended to enhance the         user experience. -->    <style>        body{            background-color：#ddd;            font-family：arial,verdana,sans-serif;        }        #dropdiv{            width:200px;            height:200px;            border:1px solid black;            background-color:white;        }        #dragdiv{            width:100px;            font:#ffffff;            height:50px;            background-color:black;        }    </style>    <script>        $("#dragdiv").draggable();        $(function () {            $("#dragdiv").draggable();            $("#dropdiv").droppable({                drop: function () { $("#dragdiv").text("dropped"); },                out: function () { $("#dragdiv").text("off and running again"); }            });        });            </script></head><body>    <div id="dropdiv" >        drop    </div>    <p>Drag the image blow into the box above</p>    <div id="dragdiv">        drag    </div>   </body></html>

阅读全文

0 0