jQuery ड्रैगगेबल + ड्रॉपपेबल: गिराए गए तत्व को ड्रॉप-ऑन तत्व पर कैसे स्नैप करें

Question

मेरी स्क्रीन दो DIV एस में विभाजित है। बाएं DIV में मेरे पास कुछ 50x50 पिक्सेल DIV एस है, दाएं DIV में मेरे पास 80x80 LI एस से बना एक खाली ग्रिड है। बाईं ओर DIV एस ड्रैग करने योग्य हैं, और एक बार LI पर गिरा दिए जाने के बाद, उन्हें LI के केंद्र में स्नैप करना चाहिए।

सरल लगता है, है ना? मुझे नहीं पता कि यह कैसे किया जाए। मैंने DIV के top और left सीएसएस गुणों को LI से मेल खाने के लिए छेड़छाड़ करके कोशिश की, लेकिन left और top गुण बाईं ओर DIV के सापेक्ष हैं।

मैं जिस तत्व को छोड़ दिया गया है उसके केंद्र में गिराए गए तत्व को स्नैप कैसे कर सकता हूं? यह आसान होना चाहिए, है ना?

संपादित करें: मैं jQuery 1.3.2 के साथ jQuery UI 1.7.2 का उपयोग कर रहा हूं।

संपादित करें 2: जो कोई भी किसी और को इस समस्या है के लिए, यह मैं इसे कैसे तय है:

मैं घसीटा तत्व को दूर करने और अंदर रखकर की कीथ के समाधान के लिए इस्तेमाल किया गिरा-ऑन तत्व की drop कॉलबैक में droppable प्लगइन:

function gallerySnap(droppedOn, droppedElement) 
{ 
    $(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>'); 
    $(droppedElement).remove(); 
} 

मैं गिरा तत्व नहीं है फिर से खींचने योग्य होने के लिए, लेकिन अगर आप ऐसा करेंगे, बस फिर से इसे करने के लिए खींचने योग्य बाँध।

मेरे लिए इस विधि ने गिराए गए तत्वों (जो बाएं DIV के सापेक्ष होगा) की स्थिति में होने वाली समस्या को हल किया और दूसरे DIV के अंदर स्क्रॉल किया। (तत्व पृष्ठ पर तय रहेंगे, अब वे साथ स्क्रॉल करेंगे)।

मैंने ड्रैग करते समय इसे अच्छे लगने के लिए स्नैप विकल्पों के साथ खेलना शुरू किया, इसलिए उस सुझाव के लिए karim79 को धन्यवाद।

शायद मैं इसके साथ किसी भी अद्भुत कोड पुरस्कार नहीं जीतूंगा, इसलिए यदि आप सुधार के लिए कमरा देखते हैं, तो कृपया साझा करें!

Answer 1

मैं एक ऐसी ही समस्या थी इस्तेमाल किया का एक नमूना है - मैं इसे चारों ओर मैन्युअल रूप से अपने पुराने माता पिता से घसीटा तत्व को दूर करने और तत्व पर गिरा में जोड़कर काम किया ।

Answer 2

बाईं तरफ div सही पर li s (आप Firebug के साथ इस बात की पुष्टि कर सकते हैं) में वास्तव में कर रहे हैं, और यदि li एक ul में सभी कर रहे हैं (के रूप में वे किया जाना चाहिए), एक या दोनों का प्रयास करें निम्न में से:

ul#right_div { 
    text-align: center; 
} 

ul#right_div li { 
    text-align: center; 
} 

Answer 3

मैंने पाया है कि जब आप खींचें, jQuery यूआई में बताने के लिए जहां आप इसे गिरा दिया एक इनलाइन कहते हैं। नीचे दिए गए कोड है कि मैं उसे उसके स्थान स्नैप करने के लिए

$('.droppable').droppable({ drop: function(ev, ui) { 
    //Get Details of dragged and dropped 
    var draggedclass = ui.draggable.attr('class'), 
     droppedclass = 'class' + $(this).attr('name').toLowerCase(); 

    //update the classes so that it looks od.  
    ui.draggable.removeClass(draggedclass).addClass(droppedclass); 
    ui.draggable.removeAttr('style'); 
}); 

Answer 4

आपकी पोस्ट के लिए धन्यवाद - इससे मुझे सही दिशा में मदद मिली। मुझे HTML कोड के साथ गड़बड़ करने की बजाय ड्रैगगेबल ऑब्जेक्ट की स्थिति गुण सेट करने के लिए थोड़ा क्लीनर लगता है। यह droppable ऑब्जेक्ट के ऊपरी बाएं कोने में स्थित स्थिति सेट करता है, लेकिन आप इसे केंद्रित करने के लिए भी संशोधित कर सकते हैं।

drop: function(event, ui) { 
    $(ui.draggable).css('top', $(this).position().top); 
    $(ui.draggable).css('left', $(this).position().left); 
} 

Answer 5

$("form li").draggable({snap:'.ui-droppable', snapMode:'inner', revert:true}); 
$('.drop').droppable({drop:function(ev, ui) 
          {$(ui.draggable).appendTo($(this)) 
              .css({position:'static', left:'0px', top:'0px'}) 
              .draggable('option', 'disabled', false) 
              .css({position:'relative'}); 
          } 
        } 
        ); 

Answer 6

मैंने पाया कि कीथ के विधि मेरे लिए काम किया। चूंकि उनकी जवाब एक उदाहरण दिया गया शामिल नहीं है, मैं मेरा पोस्ट करेंगे:

$('.dropTarget').droppable({ 
    drop: function(ev, ui) { 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 
    } 
}); 

या, थोड़ा और अधिक संक्षेप में:

$('.dropTarget').droppable({ 
    drop: function(ev, ui) { 
     $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this); 
    } 
}); 

Answer 7

बैरी कोड के आधार पर, डी अगर हम एक जोड़ना चाहते क्या "x" बटन के साथ विकल्प को नए माता-पिता से फिर से अलग किया जाना चाहिए और प्रारंभिक में दोबारा जोड़ा जा सकता है?

मैंने सोचा इस तरह sth, लेकिन काम करने के लिए .. एक चर कि प्रारंभिक अवस्था पकड़ के कुछ प्रकार बनाने के लिए नहीं मालूम था

var flag; 
$('.draggable-div').draggable({ 
    revert: 'invalid', 
    stop: function(){ 
     $(this).draggable('option','revert','invalid'); 
     $(this).find('.undo').show(); 
    flag=$(this).parent(); 
    } 
}); 


$('.draggable-div').find('.undo').click(function(i, e) { 
    var $div = $(this).parent(); 
$($div).detach().appendTo(flag); 
} 

sth निश्चित रूप से गलत है, लेकिन मैं अगर तुम नहीं जानते अवधारणा प्राप्त कर सकते हैं ... जो कुछ भी आपने अपने शुरुआती राज्य में छोड़ दिया है उसे उलट करने में सक्षम है।