खींचने योग्य स्नैप छोड़ दिया है जब

Question

गिरा ** संपादित करें * *

मैं वर्तमान में एक खींचें बनाने रहा हूँ और जहाँ उपयोगकर्ता क्रम में हाइलाइट किए गए शब्द पर पत्र खींच लेता है यह वर्तनी और प्रकट करने के लिए वर्तनी खेल ड्रॉप पीछे की छवि।

जब एक शब्द "। वर्तनी" शैली द्वारा हाइलाइट किया जाता है, तो यह उपयोगकर्ता को उस शब्द का जादू करने के लिए इंगित करता है। जब उपयोगकर्ता उस क्षेत्र में एक पत्र खींचने के लिए जाता है तो वह 3 अक्षरों की जगह में कहीं भी पत्र खींच सकता है, लेकिन मुझे सही क्रम में शब्द वर्तनी करने के लिए "बाएं" से "दाएं" में गिरा दिया जाना चाहिए ।

असल में जब शब्द पर एक पत्र गिरा दिया जाता है तो मुझे बाईं ओर स्नैप करने की आवश्यकता होती है (शब्द का पहला अक्षर) और फिर अगला पत्र शब्द के अगले अक्षर पर स्नैप हो जाता है ... इसलिए यह वर्तनी है सही क्रम में

यह सुनिश्चित करने के लिए मैं क्या कर सकता हूं?

खींचने योग्य के लिए

स्क्रिप्ट और droppable draggables के लिए

$('.drag').draggable({ 
helper: 'clone', 
snap: '.drop', 
grid: [62, 62], 
revert: 'invalid', 
snapMode: 'corner', 
start: function(){ 
    var validDrop = $('.drop-box.spellword'); 
    validDrop.addClass('drop'); 
    makeDroppables(); 
} 
}); 


function makeDroppables(){ 
$('.drop').droppable({ 
drop: function(event, ui) { 
    word = $(this).data('word'); 
    guesses[word].push($(ui.draggable).attr('data-letter')); 

    if ($(this).text() == $(ui.draggable).text().trim()) { 

     $(this).addClass('wordglow3'); 
    } else { 
     $(this).addClass('wordglow'); 
    } 


    if (guesses[word].length == 3) { 
     if (guesses[word].join('') == word) { 
      $('td[data-word=' + word + ']').addClass('wordglow2'); 

     } else { 
      $('td[data-word=' + word + ']').addClass("wordglow4"); 
      guesses[word].splice(0, guesses[word].length); 
     } 
    } 
}, 


activate: function(event, ui) { 
    word = $(this).data('word'); 

    // try to remove the class 
    $('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3'); 
} 

}); 

} 

एचटीएमएल है ... ....

<div class="squares"> 

     <div id="drag1" class="drag ui-widget-content box-style2" tabindex="0" data-letter="a"> 
     <p>a</p> 
     </div> 

     <div id="drag2" class="drag ui-widget-content box-style" tabindex="0" data-letter="b"> 
     <p>b</p> 
     </div> 

     <div id="drag3" class="drag ui-widget-content box-style" tabindex="0" data-letter="c"> 
     <p>c</p> 
     </div> 

     <div id="drag4" class="drag ui-widget-content box-style" tabindex="0" data-letter="d"> 
     <p>d</p> 
     </div> 

     <div id="drag5" class="drag ui-widget-content box-style2" tabindex="0" data-letter="e"> 
     <p>e</p> 
     </div> 

     <div id="drag6" class="drag ui-widget-content box-style" tabindex="0" data-letter="f"> 
     <p>f</p> 
     </div> 

     <div id="drag7" class="drag ui-widget-content box-style" tabindex="0" data-letter="g"> 
     <p>g</p> 
     </div> 

     <div id="drag8" class="drag ui-widget-content box-style" tabindex="0" data-letter="h"> 
     <p>h</p> 
     </div> 

     <div id="drag9" class="drag ui-widget-content box-style2" tabindex="0" data-letter="i"> 
     <p>i</p> 
     </div> 

     <div id="drag10" class="drag ui-widget-content box-style" tabindex="0" data-letter="j"> 
     <p>j</p> 
     </div> 

     <div id="drag11" class="drag ui-widget-content box-style" tabindex="0" data-letter="k"> 
     <p>k</p> 
     </div> 

     <div id="drag12" class="drag ui-widget-content box-style" tabindex="0" data-letter="l"> 
     <p>l</p> 
     </div> 

     <div id="drag13" class="drag ui-widget-content box-style" tabindex="0" data-letter="m"> 
     <p>m</p> 
     </div> 

     <div id="drag14" class="drag ui-widget-content box-style" tabindex="0" data-letter="n"> 
     <p>n</p> 
     </div> 

     <div id="drag15" class="drag ui-widget-content box-style2" tabindex="0" data-letter="o"> 
     <p>o</p> 
     </div> 

     <div id="drag16" class="drag ui-widget-content box-style" tabindex="0" data-letter="p"> 
     <p>p</p> 
     </div> 

     <div id="drag17" class="drag ui-widget-content box-style" tabindex="0" data-letter="r"> 
     <p>r</p> 
     </div> 

     <div id="drag18" class="drag ui-widget-content box-style" tabindex="0" data-letter="s"> 
     <p>s</p> 
     </div> 

     <div id="drag19" class="drag ui-widget-content box-style" tabindex="0" data-letter="t"> 
     <p>t</p> 
     </div> 

     <div id="drag20" class="drag ui-widget-content box-style2" tabindex="0" data-letter="u"> 
     <p>u</p> 
     </div> 


    </div> 

Answer 1

व्यक्तिगत रूप से, मुझे इस प्रभाव के लिए सीएसएस का उपयोग करने का विचार पसंद नहीं है। ऐसा क्यों न करें जैसे कि शब्द वास्तव में शब्द की पहली खुली जगह पर गिरा दिया गया था?

http://jsfiddle.net/nickaknudson/sYJwm/

$('.drop').droppable({ 
... 
drop: function(event, ui) { 
    word = $(this).data('word'); 
    //change context from this to that 
    that = $('.spellword')[guesses[word].length]; 
    guesses[word].push($(ui.draggable).attr('data-letter')); 

    if ($(that).text() == $(ui.draggable).text().trim()) { 

     $(that).addClass('wordglow3'); 
    } else { 
     $(that).addClass('wordglow'); 
    } 


    if (guesses[word].length == 3) { 
     if (guesses[word].join('') == word) { 
      $('td[data-word=' + word + ']').addClass('wordglow2'); 

     } else { 
      $('td[data-word=' + word + ']').addClass("wordglow4"); 
      guesses[word].splice(0, guesses[word].length); 
     } 
    } 
}, 
... 

Answer 2

मैं पूरी तरह से आपकी समस्या समझ में नहीं आया लेकिन सिर्फ अपने को देखकर कोड ऐसा कुछ लगता है जो मैं बदलता हूं:

revert: function(droppable) { 
    return !droppable; 
}); 

यदि आप इसका मतलब है कि आपको पहले तत्व तक पहुंचने की आवश्यकता है, फिर दूसरा, तीसरा, आदि ताकि आप pseudo selectors

Answer 3

मुझे ऐसा लगता है कि आपको केवल एक फ्लोट की आवश्यकता है: अपने सीएसएस में बाएं संपत्ति ताकि divs दाईं ओर स्थित हो कंटेनर में आदेश

Answer 4

आप ड्रैगगेबल के साथ क्रमबद्ध यूई का उपयोग कर सकते हैं। तो float:left रूप user1555320 सुझाव दिया ... कुछ इस तरह:

$('.drop').sortable({revert:true, axis:'x'}); 

$('.drag').draggable({ 
connectToSortable:'.drop', 
helper: 'clone', 
snap: '.drop', 
grid: [60, 60], 
revert: function(droppable) { 
    if (droppable === false) { 
     return true; 
    } 

    else { 

     return false; 
    } 
} 
}); 

फिर अपने सीएसएस

.drop div { 
    float:left;   
} 

Answer 5

आप DIV पर स्नैप करना प्रभाव के लिए सीएसएस नाव का उपयोग कर की कोशिश कर सकते। शायद नीचे कुछ ऐसा है।

#mainlist { 
    width: 20%; 
    float: left; 
    padding: 2px; 
} 

Answer 6

Anz & malificent से जवाब दोनों अच्छे हैं, लेकिन लगता है कि पत्र है कि "में पिछले एक - के रूप में अंतिम स्थान पर 'के रूप में हल कर रहे हैं बनाने और रिश्तेदार के लिए सेटिंग स्थिति एक बेहतर समाधान हो के रूप में यह से बचने होगा सीएसएस में कुछ गिरावट गड्ढे आप आगे स्टाइल लागू करना चाहते हैं।

#mainlist { 
    width: 20%; 
    position: relative; 
    padding: 2px; 
    max-height: 65px; 
}