CODEWITHSUNDEEP
jqueryhtmljquery-uijquery-plugins
arohi solanki
arohi solanki

Reputation: 15

jquery UI soratble Customization

$(function() {
         $('#left, #right').sortable({
         connectWith: ".connected",
         item: ".widget"
        });
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="left" class="connected sortable">
     <div class="widget">widget1</div>
     <div class="widget">widget2</div>
     <div class="widget">widget3</div>
     <div class="widget">widget4</div>
    </div>

<br>
    <div id="right" class="connected sortable">
      <div class="widget">widget5</div>
      <div class="widget">widget6</div>
      <div class="widget">widget7</div>
     <div class="widget">widget8</div>
    </div>

In above code i want to customize like if i move widget1 in place of widget 8 then widget8 is automatically comes in place of widget1.

please help me to resolve this problem.

Thanks

Upvotes: 1

Views: 47

Answers (1)

Sumit patel
Sumit patel

Reputation: 3903

Use jQuery.fn.swap updated in script i have some Example in Fiddle. if i move widget1 in place of widget 8 then widget8 is automatically comes in place of widget1.

JsFiddle Demo

Snippet Example Below

jQuery.fn.swap = function(b){ 
  // method from: http://blog.pengoworks.com/index.cfm/2008/9/24/A-quick-and-dirty-swap-method-for-jQuery
  b = jQuery(b)[0]; 
  var a = this[0]; 
  var t = a.parentNode.insertBefore(document.createTextNode(''), a); 
  b.parentNode.insertBefore(a, b); 
  t.parentNode.insertBefore(b, t); 
  t.parentNode.removeChild(t); 
  return this; 
};


$( ".widget" ).draggable({ revert: true, helper: "clone" });

$( ".widget" ).droppable({
  accept: ".widget",
  drop: function( event, ui ) {

    var draggable = ui.draggable, droppable = $(this),
        dragPos = draggable.position(), dropPos = droppable.position();

    draggable.css({
      left: dropPos.left+'px',
      top: dropPos.top+'px'
    });

    droppable.css({
      left: dragPos.left+'px',
      top: dragPos.top+'px'
    });
    draggable.swap(droppable);
  }
});
#left, #right
{
  border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>


<div id="left" class="connected sortable">
  <div class="widget" id="widget1">widget1</div>
  <div class="widget" id="widget2">widget2</div>
  <div class="widget" id="widget3">widget3</div>
  <div class="widget" id="widget4">widget4</div>
</div>

<div id="right" class="connected sortabwidgetle">
  <div class="widget" id="widget5">widget5</div>
  <div class="widget" id="widget6">widget6</div>
  <div class="widget" id="widget7">widget7</div>
  <div class="widget" id="widget8">widget8</div>
</div>

Upvotes: 1

Related Questions