123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- <!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>
|