7

गठबंधन मैं एक ड्रैगगेबल पैनल (शीर्ष पर), और एक क्रमबद्ध पैनल (नीचे) गठबंधन करने की कोशिश कर रहा हूँ।Jquery UI सॉर्ट करने योग्य और draggable

ड्रैगिंग ठीक काम करता है, लेकिन सॉर्टिंग विफल हो जाती है। http://jsfiddle.net/dmUKY/9/

दोनों Drag'n ड्रॉप और sortable कार्यों के शेयरों droppable:drop समारोह:

यहाँ मेरी जे एस बेला है। तत्वों को सॉर्ट करते समय, फ़ंक्शन को चयनित ऑब्जेक्ट को प्रतिस्थापित करना होता है।

drop: function (event, ui) { 
    //alert($(this).parent().html()); 
    //alert($(ui.helper).attr('class')); 
    var obj; 
    if ($(ui.helper).hasClass('draggable')) { 
     //alert('draggable'); 
     obj = $(ui.helper).clone(); 
     obj.removeClass('draggable').addClass('editable') 
     //obj.addClass('droppable'); 
     $(this).parent().append(obj); 

    } 


    //alert($(this).parent().html()); 
} 

मुझे इन दो कार्यशीलताओं को कैसे जोड़ना चाहिए?

उत्तर

4

इस के लिए अपने कोड को बदलें चाल करना चाहिए: बेला पर

obj.removeClass('draggable').addClass('editable').removeAttr('style'); 
//obj.addClass('droppable'); 
$(this).append(obj); 

जांच: http://jsfiddle.net/dmUKY/11/

+0

धन्यवाद! यदि 2 अलग-अलग क्रमबद्ध क्षेत्र हैं तो मुझे कैसे करना चाहिए? क्या मैं उन वस्तुओं के बदले में वस्तुओं का आदान-प्रदान कर सकता हूं? JSfiddle: http://jsfiddle.net/dmUKY/11/ – dams

+0

अद्यतन लिंक: http://jsfiddle.net/dmUKY/16/ – dams

+1

इसे आजमाएं http://jsfiddle.net/dmUKY/18/ – trrrrrrm

15
$("#sortable").sortable({ 
    revert: true, 
    stop: function(event, ui) { 
     if(!ui.item.data('tag') && !ui.item.data('handle')) { 
      ui.item.data('tag', true); 
      ui.item.fadeTo(400, 0.1); 
     } 
    } 
}); 
$("#draggable").draggable({ 
    connectToSortable: '#sortable', 
    helper: 'clone', 
    revert: 'invalid' 
}); 
$("ul, li").disableSelection(); 

DEMO JSFIDDLE

मुझे लगता है कि यह आपके लिए क्या देख रहे थे है! !

संबंधित मुद्दे