<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="UTF-8">
|
<title>Basic Droppable - jQuery EasyUI Demo</title>
|
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
<link rel="stylesheet" type="text/css" href="../demo.css">
|
<script type="text/javascript" src="../../jquery.min.js"></script>
|
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
</head>
|
<body>
|
<h2>Basic Droppable</h2>
|
<p>Drag the boxed on left to the target area on right.</p>
|
<div style="margin:20px 0;"></div>
|
<div style="float:left;width:200px;margin-right:20px;">
|
<div class="title">Source</div>
|
<div>
|
<div class="dragitem">Apple</div>
|
<div class="dragitem">Peach</div>
|
<div class="dragitem">Orange</div>
|
</div>
|
</div>
|
<div style="float:left;width:200px;">
|
<div class="title">Target</div>
|
<div class="easyui-droppable targetarea"
|
data-options="
|
accept: '.dragitem',
|
onDragEnter:function(e,source){
|
$(this).html('enter');
|
},
|
onDragLeave: function(e,source){
|
$(this).html('leave');
|
},
|
onDrop: function(e,source){
|
$(this).html($(source).html() + ' dropped');
|
}
|
">
|
</div>
|
</div>
|
<div style="clear:both"></div>
|
<style type="text/css">
|
.title{
|
margin-bottom:10px;
|
}
|
.dragitem{
|
border:1px solid #ccc;
|
width:50px;
|
height:50px;
|
margin-bottom:10px;
|
}
|
.targetarea{
|
border:1px solid red;
|
height:150px;
|
}
|
.proxy{
|
border:1px solid #ccc;
|
width:80px;
|
background:#fafafa;
|
}
|
</style>
|
<script>
|
$(function(){
|
$('.dragitem').draggable({
|
revert:true,
|
deltaX:10,
|
deltaY:10,
|
proxy:function(source){
|
var n = $('<div class="proxy"></div>');
|
n.html($(source).html()).appendTo('body');
|
return n;
|
}
|
});
|
});
|
</script>
|
</body>
|
</html>
|
