jquery的UI定制soratble

Question

$(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>

在上述代码中，我想自定义一样，如果我代替插件8的WIDGET1移动然后widget8自动地到达到位WIDGET1的。

请帮我解决这个问题。

感谢

Answer 1

使用jQuery.fn.swap脚本更新我在小提琴一些例。 如果我移动widget1代替widget8，那么widget8会自动代替widget1。

的jsfiddleDemo

片段的例子下面

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>