<!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" οndragstart="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" οndragοver="allowDrop(event)" οndrοp="drop(event)">
</div>
<div id="divUser2" οndragοver="allowDrop(event)" οndrοp="drop(event)">
</div>
<div id="divBtn">
<input type="button" value="确定" style="margin-top:10px;" οnclick="btnSubmit();" />
</div>
</body>
</html>
html5 draggable
最新推荐文章于 2024-08-09 07:26:20 发布