Commit 76a0033a authored by 季圣华's avatar 季圣华
Browse files

清空旧版本

parent df57ada9
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validate DateBox - 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>Validate DateBox</h2>
<p>When the selected date is greater than specified date. The field validator will raise an error.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-datebox" label="Required Date:" labelPosition="top" required style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datebox" label="End Date:" labelPosition="top" required data-options="validType:'md[\'10/11/2015\']'" style="width:100%;">
</div>
</div>
<script>
$.extend($.fn.validatebox.defaults.rules, {
md: {
validator: function(value, param){
var d1 = $.fn.datebox.defaults.parser(param[0]);
var d2 = $.fn.datebox.defaults.parser(value);
return d2<=d1;
},
message: 'The date must be less than or equals to {0}.'
}
})
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DateTimeBox - 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 DateTimeBox</h2>
<p>Click the calendar image on the right side.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-datetimebox" label="Select DateTime:" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="Description:" labelPosition="top" style="width:100%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid DateTimeBox - 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>Fluid DateTimeBox</h2>
<p>This example shows how to set the width of DateTimeBox to a percentage of its parent container.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-datetimebox" label="width: 100%" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datetimebox" label="width: 80%" labelPosition="top" style="width:80%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Initialize Value for DateTime - 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>Initialize Value for DateTime</h2>
<p>The value is initialized when DateTimeBox has been created.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-datetimebox" label="Select DateTime:" labelPosition="top" value="10/11/2015 2:3:56" style="width:100%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Display Seconds - 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>Display Seconds</h2>
<p>The user can decide to display seconds part or not.</p>
<div style="margin:20px 0;">
<span>Show Seconds: </span>
<input type="checkbox" checked onchange="$('#dt').datetimebox({showSeconds:$(this).is(':checked')})">
</div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input id="dt" class="easyui-datetimebox" label="Select DateTime:" labelPosition="top" style="width:100%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DateTimeSpinner - 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 DateTimeSpinner</h2>
<p>Click spin button to adjust date and time.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-datetimespinner" label="Start Time:" labelPosition="top" value="6/24/2015 17:23" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datetimespinner" label="End Time:" labelPosition="top" value="6/25/2015 20:23" style="width:100%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DateTimeSpinner with Clear Icon - 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>DateTimeSpinner with Clear Icon</h2>
<p>A clear icon can be attached to the datetimespinner. Click it to clear the entered value.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-datetimespinner" value="6/24/2015 17:23:40" style="width:100%;" data-options="
showSeconds: true,
prompt: 'Input date time here!',
icons:[{
iconCls:'icon-clear',
handler: function(e){
$(e.data.target).datetimespinner('clear');
}
}],
label: 'Start Time:',
labelPosition: 'top'
">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid DateTimeSpinner - 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>Fluid DateTimeSpinner</h2>
<p>The width of datetimespinner is set in percentages.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-datetimespinner" label="width: 100%" labelPosition="top" value="6/24/2015 17:23" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datetimespinner" label="width: 80%" labelPosition="top" value="6/25/2015 20:23" style="width:80%;">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Format DateTimeSpinner - 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>Format DateTimeSpinner</h2>
<p>The DataTimeSpinner value can be formatted by specifying the 'formatter' and 'parser' functions.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-datetimespinner" label="mm/dd/yyyy hh:mm" labelPosition="top" value="6/24/2015 17:23" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datetimespinner" value="6/24/2015" data-options="label:'mm/dd/yyyy',labelPosition:'top',formatter:formatter1,parser:parser1" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datetimespinner" value="2015-6" data-options="label:'yyyy-mm',labelPosition:'top',formatter:formatter2,parser:parser2,selections:[[0,4],[5,7]]" style="width:100%;">
</div>
</div>
<script type="text/javascript">
function formatter1(date){
if (!date){return '';}
return $.fn.datebox.defaults.formatter.call(this, date);
}
function parser1(s){
if (!s){return null;}
return $.fn.datebox.defaults.parser.call(this, s);
}
function formatter2(date){
if (!date){return '';}
var y = date.getFullYear();
var m = date.getMonth() + 1;
return y + '-' + (m<10?('0'+m):m);
}
function parser2(s){
if (!s){return null;}
var ss = s.split('-');
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
if (!isNaN(y) && !isNaN(m)){
return new Date(y,m-1,1);
} else {
return new Date();
}
}
</script>
</body>
</html>
\ No newline at end of file
body {
font-family:verdana,helvetica,arial,sans-serif;
padding:20px;
font-size:12px;
margin:0;
}
h2 {
font-size:18px;
font-weight:bold;
margin:0;
margin-bottom:15px;
}
.demo-info{
padding:0 0 12px 0;
}
.demo-tip{
display:none;
}
.label-top{
display: block;
height: 22px;
line-height: 22px;
vertical-align: middle;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Dialog - 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 Dialog</h2>
<p>Click below button to open or close dialog.</p>
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
</div>
<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
The dialog content.
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Complex Toolbar on Dialog - 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>Complex Toolbar on Dialog</h2>
<p>This sample shows how to create complex toolbar on dialog.</p>
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
</div>
<div id="dlg" class="easyui-dialog" title="Complex Toolbar on Dialog" style="width:400px;height:200px;padding:10px"
data-options="
iconCls: 'icon-save',
toolbar: '#dlg-toolbar',
buttons: '#dlg-buttons'
">
The dialog content.
</div>
<div id="dlg-toolbar" style="padding:2px 0">
<table cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td style="padding-left:2px">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">Edit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">Help</a>
</td>
<td style="text-align:right;padding-right:2px">
<input class="easyui-searchbox" data-options="prompt:'Please input somthing'" style="width:150px"></input>
</td>
</tr>
</table>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:alert('save')">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">Close</a>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid Dialog - 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>Fluid Dialog</h2>
<p>This example shows how to set the width of Dialog to a percentage of its parent container.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-dialog" title="Fluid Dialog" style="width:80%;height:200px;max-width:800px;padding:10px" data-options="
iconCls:'icon-save',
onResize:function(){
$(this).dialog('center');
}">
<p>width: 80%; height: 200px</p>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Toolbar and Buttons - 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>Toolbar and Buttons</h2>
<p>The toolbar and buttons can be added to dialog.</p>
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
</div>
<div id="dlg" class="easyui-dialog" title="Toolbar and Buttons" style="width:400px;height:200px;padding:10px"
data-options="
iconCls: 'icon-save',
toolbar: [{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add')
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save')
}
}],
buttons: [{
text:'Ok',
iconCls:'icon-ok',
handler:function(){
alert('ok');
}
},{
text:'Cancel',
handler:function(){
alert('cancel');;
}
}]
">
The dialog content.
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Draggable - 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 Draggable</h2>
<p>Move the boxes below by clicking on it with mouse.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-draggable" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc"></div>
<div class="easyui-draggable" data-options="handle:'#title'" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc;margin-top:10px">
<div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Constrain Draggable - 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>Constrain Draggable</h2>
<p>The draggable object can only be moved within its parent container.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="position:relative;overflow:hidden;width:500px;height:300px">
<div class="easyui-draggable" data-options="onDrag:onDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;">
</div>
</div>
<script>
function onDrag(e){
var d = e.data;
if (d.left < 0){d.left = 0}
if (d.top < 0){d.top = 0}
if (d.left + $(d.target).outerWidth() > $(d.parent).width()){
d.left = $(d.parent).width() - $(d.target).outerWidth();
}
if (d.top + $(d.target).outerHeight() > $(d.parent).height()){
d.top = $(d.parent).height() - $(d.target).outerHeight();
}
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Snap Draggable - 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>Snap Draggable</h2>
<p>This sample shows how to snap a draggable object to a 20x20 grid.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="position:relative;overflow:hidden;width:500px;height:300px">
<div class="easyui-draggable" data-options="onDrag:onDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;">
</div>
</div>
<script>
function onDrag(e){
var d = e.data;
d.left = repair(d.left);
d.top = repair(d.top);
function repair(v){
var r = parseInt(v/20)*20;
if (Math.abs(v % 20) > 10){
r += v > 0 ? 20 : -20;
}
return r;
}
}
</script>
</body>
</html>
\ No newline at end of file
<!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>
\ No newline at end of file
<!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>
\ No newline at end of file
<!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>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment