Question

我有七个文本范围。如何设置此跨度的随机位置？我想设置随机位置而不重叠而不退出边缘。

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

我现在的代码，我将位置设置为随机，但我不知道如何重叠。

Answer 1

好这是我的解决方案， TOP属性：
我将div拆分为（300/20）= 15个部分 - 我们可以将其称为行
所以当第一个跨度显示时，则需要一个随机元素
在ps []中，其余的不能得到这个元素，做同样的休息
具有LEFT属性：
我将随机LEFT从0设置到div可以包含span的点 =＆GT;我确保他们永远不会重叠希望它有所帮助！

＆＃13;

declare
   cursor c_data
   is
      select * from test_product_u;
begin
   for i in c_data
   loop   
      insert into test_product_u_final
                (PRODUCT_NO, CREATED_DATE, DATE_FORMAT) 
         values (i. PRODUCT_NO, i.CREATED_DATE,i.DATE_FORMAT);
   end loop;
exception when others then
---->'I want to catch the bad data here ? What are the options apart from the sqlerror message I want the data itself possibly in a VARCHAR column'<----
end;

＆＃13;

跨度的随机位置与文本

1 个答案: