升级easyUI到1.9.4版本
This commit is contained in:
78
erp_web/js/easyui/demo/droppable/accept.html
Normal file
78
erp_web/js/easyui/demo/droppable/accept.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Accept a Drop - 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>Accept a Drop</h2>
|
||||
<p>Some draggable object can not be accepted.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
|
||||
drag me!
|
||||
<div id="d1" class="drag">Drag 1</div>
|
||||
<div id="d2" class="drag">Drag 2</div>
|
||||
<div id="d3" class="drag">Drag 3</div>
|
||||
</div>
|
||||
<div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
|
||||
drop here!
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
<style type="text/css">
|
||||
.drag{
|
||||
width:100px;
|
||||
height:50px;
|
||||
padding:10px;
|
||||
margin:5px;
|
||||
border:1px solid #ccc;
|
||||
background:#AACCFF;
|
||||
}
|
||||
.dp{
|
||||
opacity:0.5;
|
||||
filter:alpha(opacity=50);
|
||||
}
|
||||
.over{
|
||||
background:#FBEC88;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function(){
|
||||
$('.drag').draggable({
|
||||
proxy:'clone',
|
||||
revert:true,
|
||||
cursor:'auto',
|
||||
onStartDrag:function(){
|
||||
$(this).draggable('options').cursor='not-allowed';
|
||||
$(this).draggable('proxy').addClass('dp');
|
||||
},
|
||||
onStopDrag:function(){
|
||||
$(this).draggable('options').cursor='auto';
|
||||
}
|
||||
});
|
||||
$('#target').droppable({
|
||||
accept:'#d1,#d3',
|
||||
onDragEnter:function(e,source){
|
||||
$(source).draggable('options').cursor='auto';
|
||||
$(source).draggable('proxy').css('border','1px solid red');
|
||||
$(this).addClass('over');
|
||||
},
|
||||
onDragLeave:function(e,source){
|
||||
$(source).draggable('options').cursor='not-allowed';
|
||||
$(source).draggable('proxy').css('border','1px solid #ccc');
|
||||
$(this).removeClass('over');
|
||||
},
|
||||
onDrop:function(e,source){
|
||||
$(this).append(source)
|
||||
$(this).removeClass('over');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
77
erp_web/js/easyui/demo/droppable/basic.html
Normal file
77
erp_web/js/easyui/demo/droppable/basic.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!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>
|
||||
71
erp_web/js/easyui/demo/droppable/sort.html
Normal file
71
erp_web/js/easyui/demo/droppable/sort.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Change Items Order - 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>Change Items Order</h2>
|
||||
<p>Drag the list items to change their order.</p>
|
||||
<div style="margin:20px 0;"></div>
|
||||
<ul style="margin:0;padding:0;margin-left:10px;">
|
||||
<li class="drag-item">Drag 1</li>
|
||||
<li class="drag-item">Drag 2</li>
|
||||
<li class="drag-item">Drag 3</li>
|
||||
<li class="drag-item">Drag 4</li>
|
||||
<li class="drag-item">Drag 5</li>
|
||||
<li class="drag-item">Drag 6</li>
|
||||
</ul>
|
||||
<style type="text/css">
|
||||
.drag-item{
|
||||
list-style-type:none;
|
||||
display:block;
|
||||
padding:5px;
|
||||
border:1px solid #ccc;
|
||||
margin:2px;
|
||||
width:300px;
|
||||
background:#fafafa;
|
||||
color:#444;
|
||||
}
|
||||
.indicator{
|
||||
position:absolute;
|
||||
font-size:9px;
|
||||
width:10px;
|
||||
height:10px;
|
||||
display:none;
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function(){
|
||||
var indicator = $('<div class="indicator">>></div>').appendTo('body');
|
||||
$('.drag-item').draggable({
|
||||
revert:true,
|
||||
deltaX:0,
|
||||
deltaY:0
|
||||
}).droppable({
|
||||
onDragOver:function(e,source){
|
||||
indicator.css({
|
||||
display:'block',
|
||||
left:$(this).offset().left-10,
|
||||
top:$(this).offset().top+$(this).outerHeight()-5
|
||||
});
|
||||
},
|
||||
onDragLeave:function(e,source){
|
||||
indicator.hide();
|
||||
},
|
||||
onDrop:function(e,source){
|
||||
$(source).insertAfter(this);
|
||||
indicator.hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user