javascript - 拖放 jquery UI

Question

我使用拖放 jquery ui 做了一件小事，它工作正常，但只有一个问题。

其中我有一个可拖动的 div 和一个可放置的区域，当可拖动的 div 落在可放置区域时，其中一个包含生成信息的 div 这个东西正常工作但是当生成太多的 div 时，它们会超出可放置区域和所有 div 的范围都是横向生成的，怎么处理？

这是我的代码:

CSS:

#draggable_area

{
    width: 250px;
    height: 250px;
    border-radius: 250px;
    border : 3px solid black;
    position: absolute;
    left: 0px;
    right: 0px;
}
#droppable_area
{
    width: 500px;
    height: 500px;
    border : 3px solid black;
    position: absolute;
    left: 25%;
    top: 25%;

}

HTML:

<div id="droppable_area"></div>
<div id="draggable_area">
    <form id="f1">
    <br><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
    <input list="size" name="size1" placeholder="Size" style="max-width:80%" id="size1"> 

           <datalist id="size">
                <option value="200x200">
                <option value="200x600">
                <option value="300x300">
                <option value="300x600">
                <option value="300x900">
                <option value="400x400">
                <option value="600x600">
                <option value="600x1200">
                <option value="800x1200">
                <option value="1000x2000">
                <option value="200x300">
                <option value="250x375">
                <option value="300x450">
                <option value="300x750">
                <option value="300x1200">
                <option value="400x800">
                <option value="600x900">
                <option value="800x800">
                <option value="1000x1000">

            </datalist>
    <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
    <input list="pc" name="pc1" placeholder="Product Category" style="max-width:80%" id="pc1"> 

           <datalist id="pc">
                <option value="Ceramic Wall">
                <option value="Ceramic/Semi-Porcelian Floor">
                <option value="SST/Vitrified Nano">
                <option value="Double charge/Multi charge Nano(DC)">
                <option value="Vetrified Glazed Tile(GVT)">
                <option value="Polished Glazed Vetrified Nano(PGVT)">
                <option value="Color Body">
                <option value="Stone/Kota Marble & granites">
                <option value="Combo Plan">
                <option value="Slim Tile">
                <option value="Raw Material">

            </datalist>
    <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;         
    <input list="ff" name="ff1" placeholder="Feel/Finish" style="max-width:80%" id="ff1"> 

            <datalist id="ff">
                    <option value="Glossy">
                    <option value="Special Protection Coat">
                    <option value="Matt/Suede/Honed">
                    <option value="Polished Glossy">
                    <option value="Rustic/Rough Surface">
                    <option value="Luster">
                    <option value="Metallic">
                    <option value="Glazed Polish Nano / Half Polished">
                    <option value="Lapato/ Sugar /Leather">

                </datalist>
     <br>  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;         

     <input list="q1" name="q11" placeholder="Quality" style="max-width:80%" id="q11"> 

               <datalist id="q1">
                    <option value="Premium">
                    <option value="Standard">
                    <option value="Other">

                </datalist> 
    </form>               

</div>

JavaScript:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
    var i= 1;
    var a;
    $('#draggable_area').draggable({
        revert: true,
        stop: function () {
            document.getElementById('f1').reset();
                    }
    });
    $('#droppable_area').droppable({
        accept: '#draggable_area',
        drop: function()
        {
            var size = document.getElementById('size1').value;
            var product_Quality = document.getElementById('pc1').value;
            var feel_finish = document.getElementById('ff1').value;
            var quality = document.getElementById('q11').value;

            console.log(size+" "+product_Quality+" "+feel_finish+" "+quality);

            var label1 = document.createElement('label');
            var label2 = document.createElement('label');
            var label3 = document.createElement('label');
            var label4 = document.createElement('label');

            var text1 = document.createTextNode(size);
            var text2 = document.createTextNode(product_Quality);
            var text3 = document.createTextNode(feel_finish);
            var text4 = document.createTextNode(quality);

            label1.appendChild(text1);
            label2.appendChild(text2);
            label3.appendChild(text3);
            label4.appendChild(text4);



            var div = document.createElement('div');
            //div.textContent = "Sup, y'all?";
            div.setAttribute('class', 'note'+ i );
            div.setAttribute('id','n'+i);
            var b  = 'n'+ i ;
            console.log(b)
            document.getElementById('droppable_area').appendChild(div);
            $('div').draggable({
                start: function()
                {
                     a = this.id;
                    console.log(a);
                }
            });

            document.getElementById(b).appendChild(label1);
            document.getElementById(b).appendChild(label2);
            document.getElementById(b).appendChild(label3);
            document.getElementById(b).appendChild(label4);


            document.getElementById(b).style.width = '100px';
            document.getElementById(b).style.height = '100px';
            document.getElementById(b).style.boxShadow = '10px 10px 10px grey';
            document.getElementById(b).style.border = '3px solid black';
            i++;
        }   
    });
</script>

请帮我解决这个问题。 非常感谢您的参与。

Answer 1

您是否考虑过为您的小盒子添加 float ？

如果您向元素添加 float ，它们将开始填充您拖动的区域。

document.getElementById(b).style.float = 'left';

使内容在之后滚动；

#droppable_area{
    overflow:auto;
}

要从容器中移除元素，您应该将这段小代码添加到小盒子的创建中。这样，当您尝试将其从盒子中移出时，它会自行移除。

$('div').draggable({
    start: function () {
        a = this.id;
        console.log(a);
    },
    stop: function () {
        if (parseInt($(this).css('top')) < 0 || parseInt($(this).css('left')) < 0) {
            $(this).remove();
        }
    }
});