2011-01-22 3 views
0

나는 목록이 두 개 있으며, 하나는 드래그 가능 (#object)이고 하나는 sortable (#target)입니다. sortable 목록에 복제본을 드래그 한 다음 복제본이 정렬 가능 목록에 있으면 복제본에 몇 가지 작업을 수행하려고합니다.복제본에 jquery ui draggable stop 기능이 있습니다.

내가 jsfiddle에 뭔가를 가지고 : http://jsfiddle.net/d8nieldonaldson/smYeh/3/

여기에 코드의 일부입니다 :

$("#object li").draggable({ 
    connectToSortable: "#target", 
    opacity: 0.5, 
    helper: "clone", 
    revert: "invalid", 
    stop: function(e , ui) { 
     ui.helper.css("width" , "140px"); 
    } 
}); 

어떤 도움을 크게 감상 할 수있다.

감사합니다.

답변

1

img이 아닌 li 요소의 크기를 조정하고 있습니다!
어쨌든 그렇게해도 (stop을 사용하여) 도우미의 크기가 조정되지만 요소를 목록에 삽입하면 원본으로 돌아가므로 코드를 수정하고 더 나은 사용자 환경에 애니메이션을 추가했습니다 .-) :

(function($) { 

    $("#target").sortable({ 
     revert: true, 
     update: function(e, ui) { 
      if (ui.item.hasClass('ui-draggable')) ui.item.find('img').animate({ 
       width: "140px" 
      }) 
     } 
    }); 
    $("#object li").draggable({ 
     connectToSortable: "#target", 
     opacity: 0.5, 
     helper: "clone", 
     revert: "invalid" 
    }); 
    $("ul, li").disableSelection(); 
})(window.jQuery); 

Example link.

+0

멋진 애니메이션입니다! – d8nieldonaldson