mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
85 lines
3.9 KiB
HTML
85 lines
3.9 KiB
HTML
<script type="text/javascript">
|
|
|
|
var model = {
|
|
|
|
renderAt: '#containerDemo',
|
|
|
|
title: 'Draggable Demos',
|
|
|
|
demos: [
|
|
|
|
{
|
|
title: 'Simple image drag',
|
|
desc: 'You also can make images draggable!',
|
|
html: '<img id="dragImage" src="templates/images/puppy.jpg" style="width: 228px; height:157px;">',
|
|
destroy: '$("#dragImage").draggable("destroy");',
|
|
|
|
options: [
|
|
{ desc: 'Using a helper clone', source: '$("#dragImage").draggable({ helper: "clone" });' },
|
|
{ desc: 'Simple Drag', source: '$("#dragImage").draggable();' },
|
|
{ desc: 'Axis x', source: '$("#dragImage").draggable({ axis: "x" });' },
|
|
{ desc: 'Axis y', source: '$("#dragImage").draggable({ axis: "y" });' },
|
|
{ desc: 'Axis x, Change cursor', source: '$("#dragImage").draggable({ axis: "x", cursor: "move" });' },
|
|
{ desc: 'Cursor position [top/left]', source: '$("#dragImage").draggable({ cursorAt: {top: 2, left: 2 } });' },
|
|
{ desc: 'Cursor position [right/bottom]', source: '$("#dragImage").draggable({ cursorAt: {bottom: 20, right: 14} });' },
|
|
{ desc: 'Drag on a Grid', source: '$("#dragImage").draggable({ grid: [50, 50] });' },
|
|
{ desc: 'Change the opacity', source: '$("#dragImage").draggable({ opacity: 0.40 });' },
|
|
{ desc: 'Drag and Revert to the original position', source: '$("#dragImage").draggable({ revert: true, helper: "clone" });' }
|
|
]
|
|
},
|
|
|
|
{
|
|
title: 'Drag div element',
|
|
desc: 'With few lines of code you could make a div draggable. You can try more options on the fly!',
|
|
html: '<div id="divDrag" class="draggable">Drag me</div><br>',
|
|
destroy: '$("#divDrag").draggable("destroy");',
|
|
options: [
|
|
{ desc: 'Simple Drag', source: '$("#divDrag").draggable();' },
|
|
{ desc: 'Dragging elements in a Region', source: '$("#divDrag").draggable({ containment: "parent" });' },
|
|
{ desc: 'Axis x', source: '$("#divDrag").draggable({ axis: "x" });' },
|
|
{ desc: 'Axis y', source: '$("#divDrag").draggable({ axis: "y" });' },
|
|
{ desc: 'Axis x, Change cursor', source: '$("#divDrag").draggable({ axis: "x", cursor: "move" });' },
|
|
{ desc: 'Cursor position [top/left]', source: '$("#divDrag").draggable({ cursorAt: {top: 2, left: 2 } });' },
|
|
{ desc: 'Cursor position [right/bottom]', source: '$("#divDrag").draggable({ cursorAt: {bottom: 20, right: 14} });' },
|
|
{ desc: 'Drag on a Grid', source: '$("#divDrag").draggable({ grid: [50, 50] });' },
|
|
{ desc: 'Using a helper clone', source: '$("#divDrag").draggable({ helper: "clone" });' },
|
|
{ desc: 'Change the opacity', source: '$("#divDrag").draggable({ opacity: 0.40 });' },
|
|
{ desc: 'Drag and Revert to the original position', source: '$("#divDrag").draggable({ revert: true, helper: "clone" });' }
|
|
]
|
|
},
|
|
|
|
{
|
|
title: 'Drag with a handle',
|
|
desc: 'Drag element by a handle.',
|
|
html: '<div id="draggable-handle-div" class="draggable"><div class="drag-handle"></div>Drag me</div>',
|
|
destroy: '$("#draggable-handle-div").draggable("destroy");',
|
|
|
|
options: [
|
|
{ desc: 'Drag using a handle', source: '$("#draggable-handle-div").draggable({ handle: "div" });' },
|
|
{ desc: 'Drag using a handle with a helper', source: '$("#draggable-handle-div").draggable({ helper: "clone", handle: "div" });' }
|
|
]
|
|
},
|
|
|
|
{
|
|
title: 'Drag prevention for pre-defined elements',
|
|
desc: 'You can change elements to not drag the parent.',
|
|
html: '<div id="draggable-dragPrevention" class="draggable"><a href="#">Drag me</a><br><input type="text" value="select me" style="width: 80px; font-size: 10px;" /></div>',
|
|
destroy: '$("#draggable-dragPrevention").draggable("destroy");',
|
|
|
|
options: [
|
|
{ desc: 'Drag using a handle', source: '$("#draggable-dragPrevention").draggable({ cancel: "a,input,textarea" });' },
|
|
{ desc: 'Drag using a handle with a helper', source: '$("#draggable-dragPrevention").draggable({ helper: "clone", cancel: "a,input,textarea" });' }
|
|
]
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
$(function(){
|
|
|
|
uiRenderDemo(model);
|
|
|
|
});
|
|
|
|
</script> |