テキストを含むスパンのランダムな位置

私はテキストを含む7つのスパンを持っています。このスパンのランダムな位置を設定するにはどうすればよいですか？私は重なりなく、エッジを出ずにランダムな位置を設定したい。テキストを含むスパンのランダムな位置

<!DOCTYPE html> 
<html lang="pl"> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    </head> 

    <style> 
.picture{ 
    border:1px solid #000; 
    margin: 5px 5px 5px 5px; 
    position:absolute; 
} 

.cont { 
    position:relative; 
    background: red; 
    width: 300px; 
    height: 300px; 
} 
</style>  

    <body> 
     <div class="cont"> 
     <input type="text" id="i_file1" name="i_file" class="textField"> 
     <input type="text" id="i_file2" name="i_file" class="textField"> 
     <input type="text" id="i_file3" name="i_file" class="textField"> 
     <input type="text" id="i_file4" name="i_file" class="textField"> 
     <input type="text" id="i_file5" name="i_file" class="textField"> 
     <input type="text" id="i_file6" name="i_file" class="textField"> 
     <input type="text" id="i_file7" name="i_file" class="textField"> 



     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 

     <button onclick="textFields()" id="texttt"> text </button> 
     <button id="losuj" onclick="reset()">reset </button> 

    </body> 

    <script> 

     function textFields() { 

      $('input[type="text"]').each(function() { 

       var id = $(this).attr("id"); 
       id = "#" + id; 
       var value1 = $(id).val(); 
       var html_code = '<br/><br/><span class="blabla">' + value1 + '</span>'; 
       $(id).after(html_code); 
       $(id).hide(); 
      }); 

      $("#texttt").hide(); 

     } 



function reset() { 

     var containerW = 300; 
     var containerH = 300; 


     $('.blabla').each(function() { 

     var x = parseInt(Math.random() * (containerW-$(this).width())); 
     var y = parseInt(Math.random() * (containerH-$(this).height())); 

      $(this).css({ 
       position: 'absolute', 
       top: x + 'px', 
       left: y + 'px' 
      }); 
     }); 
    } 



    </script> 


</html>

私のコードは今のところランダムに設定されていますが、重複してこれを行う方法はわかりません。

出典

2017-03-01 KaradaJii

OKこれは、TOP属性を持つ私のソリューションです：私は（20分の300）にdiv要素を分割
15部を= - 私たちはそれがかかります、ときに最初スパン表示されるように行
として呼び出すことができます1つのランダムPS内の要素
[]、残りは、この要素を取得することはできません、LEFT属性で
を休ませると同じ操作を行います。
私は= 0からdiv要素はスパン
を含めることができるポイントにランダムLEFTを設定>私は彼らが重複しないことを確認しますそれは助けて欲しい！

<!DOCTYPE html> 
 
<html lang="pl"> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    </head> 
 

 
    <style> 
 
.picture{ 
 
    border:1px solid #000; 
 
    margin: 5px 5px 5px 5px; 
 
    position:absolute; 
 
} 
 

 
.cont { 
 
    position:relative; 
 
    background: red; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
</style>  
 

 
    <body> 
 
<button id="losuj" onclick="random()"> 
 
     Random 
 
     </button><BR><BR> 
 
     <div class="cont"> 
 
     <input type="text" id="i_file1" name="i_file" class="textField"> 
 
     <input type="text" id="i_file2" name="i_file" class="textField"> 
 
     <input type="text" id="i_file3" name="i_file" class="textField"> 
 
     <input type="text" id="i_file4" name="i_file" class="textField"> 
 
     <input type="text" id="i_file5" name="i_file" class="textField"> 
 
     <input type="text" id="i_file6" name="i_file" class="textField"> 
 
     <input type="text" id="i_file7" name="i_file" class="textField"> 
 

 

 

 

 

 
     
 

 
    </body> 
 

 
    <script> 
 
function getRandomInteger(min, max) { 
 
    min = Math.floor(min); 
 
    max = Math.floor(max); 
 
    var rd = Math.floor(Math.random() * (max - min)) + min; 
 
    return rd; 
 
} 
 

 

 

 
function random() { 
 
     var ps= []; 
 
     var n = 0; 
 
     var containerW = 300; 
 
     var containerH = 300; 
 
     var spanW; 
 
     var spanH; 
 
     var first = true; 
 
     var first_H ; 
 
     var current_H ; 
 
     for(var i=0; i< 15; i++) 
 
     { 
 
     ps[i] = i; 
 
     } 
 
     $('input[type="text"]').each(function() { 
 
if(first) 
 
{ 
 
    spanW = $(this).width(); 
 
    spanH = $(this).height(); 
 
    first = false 
 
} 
 
    var x = getRandomInteger(0,containerW-spanW); 
 
    var p = getRandomInteger(0,ps.length-1); 
 
    var y = ps[p]*20; 
 
    ps.splice(p, 1); 
 
    $(this).css({ 
 
    position: 'absolute', 
 
    top: y + 'px', 
 
    left: x + 'px' 
 
    }); 
 
}); 
 
} 
 
    
 

 

 
    </script> 
 

 

 
</html>

出典

2017-03-02 04:26:10

あなたは修正があなたが作ったものを指定した場合、それは改善し、OPに対する答えがより便利になるだろう。 – Devjosh

OK、オーバーラップをチェックせずに最初のスパンを入れ、そのTOPを基にして残りのTOPを制限します。そしてLEFTについては、0から300に移動することができます。これは簡単です！ –

あなたはソースコードのコメントを意味しますか？ –

テキストを含むスパンのランダムな位置

答えて

関連する問題