Draggable

Makes items draggable by the mouse. Options will vary by framework. The following example assumes jQuery as the selected framework.

<style>
	.box
	{
		border:1px solid #ccc;
		width:400px;
		height:40px;
		background-color:#eee;
		margin:10px;
		padding:10px;
	}
	.resize
	{
		background-color:#ffffcc !important;
	}
	.resize_border
	{
		border:1px solid #ff0000;
	}
</style>
 
<div behavior="draggable" class="box">
	Draggable (no options)
</div>
 
<div behavior="draggable[revert=true,revertDuration=10]" class="box">
	Draggable (revert, revertDuration=10ms)
</div>
 
<div behavior="draggable"
 	on="dragstart then add[class=resize] or dragend then remove[class=resize]" class="box">
	Draggable (yellow while drag, normal on stop)
</div>
 
<div behavior="draggable" class="box"
	on="drag then add[class=resize_border]">
	Draggable  (border turns red - stays red)
</div>
 
<div id="js_draggable" behavior="draggable[start=expr(dragStart),stop=expr(dragStop)]" class="box">
	JS callback for start and stop (red border on/off)
</div>
 
<div class="box" id="draggable">
	Created via API
</div>
 
<script>
	App.addBehavior('draggable','draggable',{},null);
 
	function dragStart()
	{
		swiss('#js_draggable').addClass('resize_border')
	}
	function dragStop()
	{
		swiss('#js_draggable').removeClass('resize_border')
	}
</script>