mirror of
https://github.com/jquery/jquery-ui.git
synced 2025-01-07 20:34:24 +00:00
Droppable demos: Coding standards.
This commit is contained in:
Scott González
parent
6cf45dd25a
commit
a1fc59c17e
@ -1,38 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>jQuery UI Droppable - Accept Demo</title>
|
||||
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Accept</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.4.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#draggable, #draggable-nonvalid").draggable();
|
||||
|
||||
$("#droppable").droppable({
|
||||
accept: '#draggable',
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
$( "#draggable, #draggable-nonvalid" ).draggable();
|
||||
$( "#droppable" ).droppable({
|
||||
accept: "#draggable",
|
||||
activeClass: "ui-state-hover",
|
||||
hoverClass: "ui-state-active",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable-nonvalid" class="ui-widget-content">
|
||||
@ -49,10 +50,11 @@
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>jQuery UI Droppable - Default Demo</title>
|
||||
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.4.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
<script>
|
||||
$(function() {
|
||||
$("#draggable").draggable();
|
||||
$("#droppable").droppable({
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
$( "#draggable" ).draggable();
|
||||
$( "#droppable" ).droppable({
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
@ -40,10 +43,11 @@
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable Demos</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Simple photo manager</title>
|
||||
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.4.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script src="../../ui/jquery.ui.dialog.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
|
||||
.gallery.custom-state-active { background: #eee; }
|
||||
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
|
||||
@ -28,92 +28,107 @@
|
||||
#trash h4 .ui-icon { float: left; }
|
||||
#trash .gallery h5 { display: none; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
<script>
|
||||
$(function() {
|
||||
// there's the gallery and the trash
|
||||
var $gallery = $('#gallery'), $trash = $('#trash');
|
||||
var $gallery = $( "#gallery" ),
|
||||
$trash = $( "#trash" );
|
||||
|
||||
// let the gallery items be draggable
|
||||
$('li',$gallery).draggable({
|
||||
cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
|
||||
revert: 'invalid', // when not dropped, the item will revert back to its initial position
|
||||
containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
|
||||
helper: 'clone',
|
||||
cursor: 'move'
|
||||
$( "li", $gallery ).draggable({
|
||||
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
|
||||
revert: "invalid", // when not dropped, the item will revert back to its initial position
|
||||
containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
|
||||
helper: "clone",
|
||||
cursor: "move"
|
||||
});
|
||||
|
||||
// let the trash be droppable, accepting the gallery items
|
||||
$trash.droppable({
|
||||
accept: '#gallery > li',
|
||||
activeClass: 'ui-state-highlight',
|
||||
drop: function(ev, ui) {
|
||||
deleteImage(ui.draggable);
|
||||
accept: "#gallery > li",
|
||||
activeClass: "ui-state-highlight",
|
||||
drop: function( event, ui ) {
|
||||
deleteImage( ui.draggable );
|
||||
}
|
||||
});
|
||||
|
||||
// let the gallery be droppable as well, accepting items from the trash
|
||||
$gallery.droppable({
|
||||
accept: '#trash li',
|
||||
activeClass: 'custom-state-active',
|
||||
drop: function(ev, ui) {
|
||||
recycleImage(ui.draggable);
|
||||
accept: "#trash li",
|
||||
activeClass: "custom-state-active",
|
||||
drop: function( event, ui ) {
|
||||
recycleImage( ui.draggable );
|
||||
}
|
||||
});
|
||||
|
||||
// image deletion function
|
||||
var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>';
|
||||
function deleteImage($item) {
|
||||
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
|
||||
function deleteImage( $item ) {
|
||||
$item.fadeOut(function() {
|
||||
var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
|
||||
var $list = $( "ul", $trash ).length ?
|
||||
$( "ul", $trash ) :
|
||||
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
|
||||
|
||||
$item.find('a.ui-icon-trash').remove();
|
||||
$item.append(recycle_icon).appendTo($list).fadeIn(function() {
|
||||
$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
|
||||
$item.find( "a.ui-icon-trash" ).remove();
|
||||
$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
|
||||
$item
|
||||
.animate({ width: "48px" })
|
||||
.find( "img" )
|
||||
.animate({ height: "36px" });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// image recycle function
|
||||
var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>';
|
||||
function recycleImage($item) {
|
||||
var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
|
||||
function recycleImage( $item ) {
|
||||
$item.fadeOut(function() {
|
||||
$item.find('a.ui-icon-refresh').remove();
|
||||
$item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn();
|
||||
$item
|
||||
.find( "a.ui-icon-refresh" )
|
||||
.remove()
|
||||
.end()
|
||||
.css( "width", "96px")
|
||||
.append( trash_icon )
|
||||
.find( "img" )
|
||||
.css( "height", "72px" )
|
||||
.end()
|
||||
.appendTo( $gallery )
|
||||
.fadeIn();
|
||||
});
|
||||
}
|
||||
|
||||
// image preview function, demonstrating the ui.dialog used as a modal window
|
||||
function viewLargerImage($link) {
|
||||
var src = $link.attr('href');
|
||||
var title = $link.siblings('img').attr('alt');
|
||||
var $modal = $('img[src$="'+src+'"]');
|
||||
function viewLargerImage( $link ) {
|
||||
var src = $link.attr( "href" ),
|
||||
title = $link.siblings( "img" ).attr( "alt" ),
|
||||
$modal = $( "img[src$='" + src + "']" );
|
||||
|
||||
if ($modal.length) {
|
||||
$modal.dialog('open')
|
||||
if ( $modal.length ) {
|
||||
$modal.dialog( "open" );
|
||||
} else {
|
||||
var img = $('<img alt="'+title+'" width="384" height="288" style="display:none;padding: 8px;" />')
|
||||
.attr('src',src).appendTo('body');
|
||||
var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
|
||||
.attr( "src", src ).appendTo( "body" );
|
||||
setTimeout(function() {
|
||||
img.dialog({
|
||||
title: title,
|
||||
width: 400,
|
||||
modal: true
|
||||
});
|
||||
}, 1);
|
||||
}, 1 );
|
||||
}
|
||||
}
|
||||
|
||||
// resolve the icons behavior with event delegation
|
||||
$('ul.gallery > li').click(function(ev) {
|
||||
var $item = $(this);
|
||||
var $target = $(ev.target);
|
||||
$( "ul.gallery > li" ).click(function( event ) {
|
||||
var $item = $( this ),
|
||||
$target = $( event.target );
|
||||
|
||||
if ($target.is('a.ui-icon-trash')) {
|
||||
deleteImage($item);
|
||||
} else if ($target.is('a.ui-icon-zoomin')) {
|
||||
viewLargerImage($target);
|
||||
} else if ($target.is('a.ui-icon-refresh')) {
|
||||
recycleImage($item);
|
||||
if ( $target.is( "a.ui-icon-trash" ) ) {
|
||||
deleteImage( $item );
|
||||
} else if ( $target.is( "a.ui-icon-zoomin" ) ) {
|
||||
viewLargerImage( $target );
|
||||
} else if ( $target.is( "a.ui-icon-refresh" ) ) {
|
||||
recycleImage( $item );
|
||||
}
|
||||
|
||||
return false;
|
||||
@ -122,9 +137,10 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo ui-widget ui-helper-clearfix">
|
||||
|
||||
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
|
||||
<div class="demo ui-widget ui-helper-clearfix">
|
||||
|
||||
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
|
||||
<li class="ui-widget-content ui-corner-tr">
|
||||
<h5 class="ui-widget-header">High Tatras</h5>
|
||||
<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
|
||||
@ -149,20 +165,20 @@
|
||||
<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
|
||||
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<div id="trash" class="ui-widget-content ui-state-default">
|
||||
<div id="trash" class="ui-widget-content ui-state-default">
|
||||
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
|
||||
<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
|
||||
<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
|
||||
<div class="demo-description">
|
||||
<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
|
||||
<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
|
||||
<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,48 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Prevent propagation</title>
|
||||
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.4.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
|
||||
#droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable();
|
||||
|
||||
$("#draggable").draggable();
|
||||
|
||||
$("#droppable, #droppable-inner").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
|
||||
$( "#droppable, #droppable-inner" ).droppable({
|
||||
activeClass: "ui-state-hover",
|
||||
hoverClass: "ui-state-active",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "> p" )
|
||||
.html( "Dropped!" );
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$("#droppable2, #droppable2-inner").droppable({
|
||||
$( "#droppable2, #droppable2-inner" ).droppable({
|
||||
greedy: true,
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
|
||||
activeClass: "ui-state-hover",
|
||||
hoverClass: "ui-state-active",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "> p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
@ -65,10 +70,11 @@
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,38 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Revert draggable position</title>
|
||||
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.4.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ revert: "valid" });
|
||||
$( "#draggable2" ).draggable({ revert: "invalid" });
|
||||
|
||||
$("#draggable").draggable({ revert: 'valid' });
|
||||
$("#draggable2").draggable({ revert: 'invalid' });
|
||||
|
||||
$("#droppable").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
$( "#droppable" ).droppable({
|
||||
activeClass: "ui-state-hover",
|
||||
hoverClass: "ui-state-active",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
@ -49,10 +51,11 @@
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,53 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Shopping Cart Demo</title>
|
||||
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.4.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<script src="../../ui/jquery.ui.sortable.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
h1 { padding: .2em; margin: 0; }
|
||||
#products { float:left; width: 500px; margin-right: 2em; }
|
||||
#cart { width: 200px; float: left; }
|
||||
/* style the list to maximize the droppable hitarea */
|
||||
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
<script>
|
||||
$(function() {
|
||||
$("#catalog").accordion();
|
||||
$("#catalog li").draggable({
|
||||
$( "#catalog" ).accordion();
|
||||
$( "#catalog li" ).draggable({
|
||||
appendTo: "body",
|
||||
helper: "clone"
|
||||
});
|
||||
$("#cart ol").droppable({
|
||||
$( "#cart ol" ).droppable({
|
||||
activeClass: "ui-state-default",
|
||||
hoverClass: "ui-state-hover",
|
||||
accept: ":not(.ui-sortable-helper)",
|
||||
drop: function(event, ui) {
|
||||
$(this).find(".placeholder").remove();
|
||||
$("<li></li>").text(ui.draggable.text()).appendTo(this);
|
||||
drop: function( event, ui ) {
|
||||
$( this ).find( ".placeholder" ).remove();
|
||||
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
|
||||
}
|
||||
}).sortable({
|
||||
items: "li:not(.placeholder)",
|
||||
sort: function() {
|
||||
// gets added unintentionally by droppable interacting with sortable
|
||||
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
|
||||
$(this).removeClass("ui-state-default");
|
||||
$( this ).removeClass( "ui-state-default" );
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="products">
|
||||
@ -91,11 +91,11 @@
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>Demonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding
|
||||
them to a shopping cart, where they are sortable.</p>
|
||||
|
||||
<p>Demonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding them to a shopping cart, where they are sortable.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,43 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Visual feedback</title>
|
||||
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.4.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
<script>
|
||||
$(function() {
|
||||
$("#draggable").draggable();
|
||||
$("#droppable").droppable({
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
$( "#draggable" ).draggable();
|
||||
$( "#droppable" ).droppable({
|
||||
hoverClass: "ui-state-active",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
|
||||
$("#draggable2").draggable();
|
||||
$("#droppable2").droppable({
|
||||
$( "#draggable2" ).draggable();
|
||||
$( "#droppable2" ).droppable({
|
||||
accept: "#draggable2",
|
||||
activeClass: 'ui-state-hover',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
activeClass: "ui-state-hover",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<h3 class="docs">Feedback on hover:</h3>
|
||||
@ -60,14 +66,13 @@
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
<!-- add active class demo -->
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user