कंटेनर में गतिशील रूप से

में फिट टकराव तत्वों ने डेटाबेस से उत्पन्न विभिन्न position.top और height के साथ तत्वों को पूरी तरह से स्थान दिया है।कंटेनर में गतिशील रूप से

मैं बस इतना करने की कोशिश कर रहा हूं कि <body> कंटेनर के अंदर फिट होने के लिए चौड़ाई समायोजित करते समय इन तत्वों को सही तरीके से स्थानांतरित करके इन तत्वों को अनदेखा करना है।

मुझे टक्कर वाले तत्वों को 'बाएं' स्थिति लागू करने में कोई समस्या है।

मैं टकराव का पता लगाने के लिए https://sourceforge.net/projects/jquerycollision/ का उपयोग करता हूं।

यहाँ कैसे अंतिम चित्र दिखना चाहिए है:

$('div').each(function() { 
 
    var name = $(this).text(); 
 
    var hits = $(this).collision('div').not(this); // Find colliding elements 
 
    console.log(name + ' collides with: ' + hits.length + ' others'); 
 

 
    if (hits.length > 0) { 
 
    var widthAll = 100/(hits.length + 1); 
 

 
    // Shift colliding elements to the right with equal width 
 
    $(hits).add(this).each(function(i) { 
 
     var name = $(this).text(); 
 
     $(this).css({ 'left': widthAll * i + '%', 'width': widthAll + '%' }); 
 
    }); 
 
    } 
 
});

div { 
 
    position: absolute; 
 
    width: 10em; 
 
    font-size: 0.75em; 
 
    color: white; 
 
} 
 

 
.blue { 
 
    top: 0; 
 
    height: 80%; 
 
    background-color: blue; 
 
} 
 

 
.red { 
 
    top: 15%; 
 
    height: 5%; 
 
    background-color: red; 
 
} 
 

 
.yellow { 
 
    top: 17%; 
 
    height: 10%; 
 
    background-color: yellow; 
 
    color: black; 
 
} 
 

 
.green { 
 
    top: 30%; 
 
    height: 5%; 
 
    background-color: green; 
 
} 
 

 
.magenta { 
 
    top: 36%; 
 
    height: 3%; 
 
    background-color: magenta; 
 
} 
 

 
.cyan { 
 
    top: 50%; 
 
    height: 5%; 
 
    background-color: cyan; 
 
    color: black; 
 
} 
 

 
.brown { 
 
    top: 81%; 
 
    height: 5%; 
 
    background-color: brown; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/dsbaars/jquery-collision/master/js/jquery-collision.min.js"></script> 
 

 
<div class='blue'>blue</div> 
 
<div class='red'>red</div> 
 
<div class='yellow'>yellow</div> 
 
<div class='green'>green</div> 
 
<div class='magenta'>magenta</div> 
 
<div class='cyan'>cyan</div> 
 
<div class='brown'>brown</div>

स्रोत

2017-01-27 Alex G

मुझे लगता है कि के रूप में आप का अनुरोध किया है मैं अपने कोड पूरा कर लिया है। विचार है,

कोड का पहला ब्लॉक divs को दाईं ओर बदल देता है ताकि वे ओवरलैप न हों।
दूसरा ब्लॉक शरीर के आकार के अनुसार समान रूप से वितरित divs की चौड़ाई बनाता है।
अंतिम ब्लॉक शेष स्थान लेने के लिए divs के बाकी हिस्सों की चौड़ाई बढ़ाता है।

"use strict"; 
 
var divs = $('div'), 
 
    mx = 0, 
 
    mxs = [0], 
 
    bw = $("body").outerWidth(), 
 
    steps = 1; 
 
divs.each(function(i) { 
 
    for (var j = i + 1; j < divs.length; j++) { 
 
    if (!$(this).data("x")) $(this).data("x", 0); 
 
    if (j < divs.length) { 
 
     var hit = $(this).collision(divs[j]); 
 
     if (hit.length) { 
 
     hit = $(divs[j]); 
 
     hit.css("left", "+=" + Math.ceil($(this).outerWidth())); 
 
     hit.data("x", hit.position().left); 
 
     if (mx < hit.data("x")) { 
 
      mxs.push(mx = hit.data("x")); 
 
      steps++; 
 
     } 
 
     } 
 
    } 
 
    } 
 
}); 
 

 
divs.each(function(i) { 
 
    let iw = $(this).outerWidth(), 
 
    fw = bw/steps; 
 
    $(this).outerWidth(fw); 
 
    for (var j = i + 1; j < divs.length; j++) { 
 
    $(this).collision(divs[j]).css("left", "+=" + Math.ceil((fw - iw) * mxs.indexOf($(divs[j]).data("x")))); 
 
    } 
 
}); 
 
divs.each(function() { 
 
    var os = $(this).outerWidth(), 
 
    ts = bw - $(this).position().left; 
 
    $(this).outerWidth(ts); 
 
    if ($(this).collision(divs).not(this).length) { 
 
    $(this).outerWidth(os); 
 
    } 
 
});

body { 
 
    margin: 0; 
 
} 
 
div { 
 
    position: absolute; 
 
    width: 10em; 
 
    font-size: 0.75em; 
 
    color: white; 
 
    left: 0; 
 
} 
 
.blue { 
 
    top: 0; 
 
    height: 80%; 
 
    background-color: blue; 
 
} 
 
.red { 
 
    top: 15%; 
 
    height: 5%; 
 
    background-color: red; 
 
} 
 
.yellow { 
 
    top: 17%; 
 
    height: 10%; 
 
    background-color: yellow; 
 
    color: black; 
 
} 
 
.green { 
 
    top: 20%; 
 
    height: 50%; 
 
    background-color: green; 
 
} 
 
.magenta { 
 
    top: 36%; 
 
    height: 3%; 
 
    background-color: magenta; 
 
} 
 
.cyan { 
 
    top: 50%; 
 
    height: 5%; 
 
    background-color: cyan; 
 
    color: black; 
 
} 
 
.brown { 
 
    top: 81%; 
 
    height: 5%; 
 
    background-color: brown; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/dsbaars/jquery-collision/master/js/jquery-collision.min.js"></script> 
 

 
<div class='blue'>blue</div> 
 
<div class='red'>red</div> 
 
<div class='yellow'>yellow</div> 
 
<div class='green'>green</div> 
 
<div class='magenta'>magenta</div> 
 
<div class='cyan'>cyan</div> 
 
<div class='brown'>brown</div>

स्निपेट के ऊपर गैर उत्तरदायी है। आप इसे प्रतिक्रिया देने के लिए चाहते हैं, तो बस, घटना का आकार बदलने के bw का मूल्य बदल और दोहराने कोड ब्लॉक 2 और 3

टिप्पणी में उल्लेख किया है करने के लिए सुनो: jQuery-collision.min.js कुछ unressolved था बग्स, जैसा कि द्वारा सुझाया गया है एलेक्स जी, https://www.48design.de/de/news/2009/11/20/kollisionsabfrage-per-jquery-plugin-update-v11/ एक विकल्प हो सकता है।

स्रोत

2017-01-29 12:46:48

यदि मैं कुछ तत्वों की 'शीर्ष' और 'ऊंचाई' बदलता हूं तो यह अभी भी ओवरलैप हो जाता है। https://jsfiddle.net/n5hLehga/ स्क्रीनशॉट: https://s28.postimg.org/a14zkpsv1/Untitled.png –

@AlexG मैं इस साइट में ठीक काम करने के लिए बहुत ही आश्चर्यचकित हूं जब हम "कोड कोड स्निपेट दबाएं ", जब jsfiddle में टूटता है। वैसे भी मैं इस असामान्य व्यवहार को डीबग करने के लिए एक और नजर रखूंगा। –

@AlexG मैं कुछ उदाहरण देख सकता हूं जहां jquery-टक्कर प्लगइन अपेक्षित काम करने में विफल रहा। शायद, हम अन्य विकल्पों का उपयोग कर सकते हैं या छेड़छाड़ का पता लगाने के लिए भी अपनी प्लगइन बना सकते हैं। –

कंटेनर में गतिशील रूप से

उत्तर

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