2011-01-22 2 views
0

У меня есть 2 списка, один draggable (#object) и один сортируемый (#target). Я хотел бы перетащить клон в сортируемый список, а затем сделать некоторые вещи к клону, как только он находится в отсортированном списке.jquery ui draggable stop function on clone

у меня есть что-то на 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

Вы изменяете размер li, а не img!
В любом случае, даже при этом будет изменен размер помощника (с использованием 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