Example #1
0
echo ui_link_button(array('id' => 'btnDraggableListener', 'value' => 'Listener'));
?>

<div class="demo">

<div id="draggable" class="ui-widget-content" style="width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;">
	<p>Drag me to my target</p>
</div>
<?php 
ui_draggable_support_to('#draggable', array('listener' => array('selector' => '#btnDraggableListener', 'event' => 'click', 'before' => like_function('alert("You can drag now to target")')), 'cursorAt' => array('cursor' => 'crosshair', 'top' => -5, 'left' => -5)));
?>
<div id="noacceptable" class="ui-widget-content" style="width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;">
	<p>Drag me to my target</p>
</div>
<?php 
ui_draggable_support_to('#noacceptable', array('revert' => true, 'cursor' => 'move', 'cursorAt' => array('top' => -12, 'left' => -20), 'helper' => 'clone', 'helperFunction' => like_function("return \$('<div class=\"ui-widget-header\">But i\\'m no acceptable</div>')", 'event')));
?>
<div id="droppable" class="ui-widget-header" style="width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;">
	<p>Drop here</p>
</div>

<?php 
ui_droppable_support_to('#droppable', array('drop' => like_function("\$(this).addClass('ui-state-highlight').find('p').html('Dropped!');"), 'deactivate' => like_function('alert("Deactivete successful")'), 'accept' => '#draggable', 'activeClass' => 'ui-state-active', 'addClasses' => true, 'greedy' => true, 'tolerance' => 'touch', 'hoverClass' => 'ui-state-hover'));
?>
</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 -->

<fieldset>
<legend> Example: Actions buttons for ui.draggable </legend>
?>

<br>
<div class="demo">
  <div>
  <?php 
echo ui_init_content_panel(array('id' => 'resizablePanel', 'style' => 'width: 150px; height: 150px; padding: 0.5em; background-position: top left;'));
?>

      <?php 
echo ui_init_title(array('textAlign' => 'center'));
?>
              Resize Panel
      <?php 
echo ui_end_title();
?>
      <p>This is the content</p>
  <?php 
echo ui_end_content_panel();
?>

  <?php 
ui_resizable_support_to('#resizablePanel', array('animate' => true, 'autoHide' => true, 'listener' => array('selector' => '#btnResizableListener', 'event' => 'click')));
?>
  
  <?php 
ui_draggable_support_to('#resizablePanel');
?>
  </div>
</div>
<br>