[JQuery] JQuery Interaction

JQuery?

a combination of interaction, effects, widgets, utilities, and themes

 

 

# Interaction

 

Draggable
=> 드래그 가능

  <script>
  $( function() {
    $( "#draggable" ).draggable();
  } );
  </script>

 

 

Droppable
=> 아이템을 끌어다 놓을 수 있음.

  <script>
  $( function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  } );
  </script>

 

Resizable
=> 마우스로 element 사이즈 변경 가능

  <script>
  $( function() {
    $( "#resizable" ).resizable();
  } );
  </script>

 

Selectable
=> element들을 선택 가능함.

  <script>
  $( function() {
    $( "#selectable" ).selectable();
  } );
  </script>

 

Sortable
=> element들을 재정렬 가능

<script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>