随机文本跨度的位置

我有七个文本跨度。我怎样才能设置这个跨度的随机位置？我想设置没有重叠和没有退出边缘的随机位置。随机文本跨度的位置

<!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

确定这是我的解决方案，与TOP属性：
我股利拆分（二十○分之三百）= 15份 - 我们可以称之为为行
所以当第一跨度显示，那么它会一个随机元素
以ps []，其余不能得到这个元件，做同样的休息
与LEFT属性：
余设置的随机LEFT从0到其在div可以包括跨度点
= >我确定他们从来没有重叠希望它有帮助！

<!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

好吧，我把第一个跨度没有检查重叠，然后根据它的TOP我限制休息的TOP。关于左边我允许他们从0移动到300.它非常简单！ –

你的意思是源代码的评论，对不对？ –

随机文本跨度的位置

回答

相关问题