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은 내가 바이올린의 일부 예를 가지고있다. 위젯 8 대신 위젯 1을 이동하면 위젯 1 대신 위젯 8이 자동으로옵니다. 나를 위해

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>