html5 draggable

来源：互联网发布：淘宝怎么上货到店铺编辑：程序博客网时间：2024/06/14 08:06
<!doctype html><html><head>    <title>draggable</title>    <style type="text/css">        #divUser1 {            border: 1px solid black;            float: left;            width: 193px;            height: 540px;        }        section {            border: 1px solid black;            width: 150px;            height: 100px;            padding: 10px;            margin: 10px;        }        #divUser2 {            border: 1px solid black;            float: left;            margin-left: 10px;            width: 193px;            height: 540px;        }        #divBtn {            clear: both;        }    </style>    <script type="text/javascript" src="javascript/jquery.js"></script>    <script type="text/javascript">        var studentid;        var students = [                        { id: 1, name: '张三1', classinfo: '高二 1班' },                        { id: 2, name: '张三2', classinfo: '高二 2班' },                        { id: 3, name: '张三3', classinfo: '高二 3班' },                        { id: 4, name: '张三4', classinfo: '高二 4班' },        ];        $(function () {            if (students.length > 0) {                var html = '';                $.each(students, function (i, item) {                    html += '<section id="' + item.id + '" draggable="true" ondragstart="drag(event);">';                    html += '<h1>' + item.name + '</h1>';                    html += '<p>' + item.classinfo + '</p>'                    html += '</section>';                });                $('#divUser1').append(html);            }        });        function drag(ev) {//拖动用户卡片,保存学生编号            studentid = ev.target.id;        }        function allowDrop(ev) {//允许用户卡片拖动到div区域            ev.preventDefault();        }        function drop(ev) {//当用户卡片拖动到div区域后放开鼠标            var divid = ev.target.id;            $('#' + divid).append($('#' + studentid));            ev.preventDefault();        }        function btnSubmit() {            if ($('#divUser2>section').length > 0) {                var names = '';                $('#divUser2>section').each(function () {                    var model = getStudentById(this.id);                    if (model != null) {                        names += '【' + model.name + '】';                    }                });                alert(names);            } else {                alert('请选择参加比赛的学生');            }        }        function getStudentById(id) {//根据学生编号获取学生信息            var model = null;            $.each(students, function (i, item) {                if (item.id == id) {                    model = item;                    return false;                }            });            return model;        }    </script></head><body>    <h1>请选择参加比赛的学生</h1>    <div id="divUser1" ondragover="allowDrop(event)" ondrop="drop(event)">    </div>    <div id="divUser2" ondragover="allowDrop(event)" ondrop="drop(event)">    </div>    <div id="divBtn">        <input type="button" value="确定" style="margin-top:10px;" onclick="btnSubmit();" />    </div></body></html>
0 0