mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
87 lines
3.1 KiB
HTML
87 lines
3.1 KiB
HTML
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
var model = {
|
||
|
|
|
||
|
|
renderAt: '#containerDemo',
|
||
|
|
|
||
|
|
title: 'Doppable Demos',
|
||
|
|
|
||
|
|
demos: [
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Droppable',
|
||
|
|
desc: 'With few lines of code you could make an element droppable. You can try more options on the fly!',
|
||
|
|
html: { url: 'templates/ui.droppable.photos.html' },
|
||
|
|
destroy: '$(".droppable-photos-container").droppable("destroy");',
|
||
|
|
options: [
|
||
|
|
{
|
||
|
|
desc: 'Photo manager',
|
||
|
|
source: '$(".droppable-photos-container").droppable({ accept: ".img_content", drop: function(ev, ui) { ui.draggable.clone().fadeOut("fast", function() { $(this).fadeIn("fast") }).appendTo($(this).empty()); } });'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
title: 'Droppable',
|
||
|
|
desc: 'With few lines of code you could make an element droppable. You can try more options on the fly!',
|
||
|
|
html: '<div class="block">.block</div><div class="draggable red">.red</div><div class="draggable green">.green</div><div class="drop">Drop on me!<br><br></div>',
|
||
|
|
destroy: '$(".drop").droppable("destroy");',
|
||
|
|
options: [
|
||
|
|
{
|
||
|
|
desc: 'Accept all, Active Class',
|
||
|
|
source: '$(".drop").droppable({ accept: ".block, .red, .green", activeClass: "droppable-active", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
desc: 'Only accept .block',
|
||
|
|
source: '$(".drop").droppable({ accept: ".block", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
desc: 'Only accept .red',
|
||
|
|
source: '$(".drop").droppable({ accept: ".red", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
desc: 'Only accept .green',
|
||
|
|
source: '$(".drop").droppable({ accept: ".green", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
desc: 'Accept all, Hover Class',
|
||
|
|
source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "droppable-hover", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
desc: 'Accept all, Mouse tolerance',
|
||
|
|
source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "silver", tolerance: "pointer", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
desc: 'Accept all, Touch tolerance',
|
||
|
|
source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "silver", tolerance: "touch", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
desc: 'Accept all, Activate/Deactivate callbacks',
|
||
|
|
source: '$(".drop").droppable({ accept: ".block, .red, .green, .red, .green", activate: function(ev, ui) { $(this).append("Activate! "); }, deactivate: function(ev, ui) { $(this).append("Deactivate! "); }});'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
desc: 'Accept all, Over/Out callbacks',
|
||
|
|
source: '$(".drop").droppable({ accept: ".block, .red, .green", over: function(ev, ui) { $(this).append("Over! "); }, out: function(ev, ui) { $(this).append("Out! "); }});'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
onRenderEnd: function() {
|
||
|
|
$(".block, .green, .red").draggable({helper: "clone"});
|
||
|
|
|
||
|
|
$('ul.droppable-gallery img').addClass('img_content').draggable({
|
||
|
|
helper: 'clone'
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
$(function(){
|
||
|
|
|
||
|
|
uiRenderDemo(model);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|