拖放jquery UI

Question

我使用拖放jquery ui制作了一个小东西，它工作得很好，但它只有一个问题。

在其中我有一个可拖动的div和一个可放置的区域，当可拖动的div放在droppable区域中时，一个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

你有没有考虑在你的小盒子里添加漂浮物？

如果向元素添加浮点数，它们将开始填充拖动区域。

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();
        }
    }
});

Answer 2

如果您尝试获取容器内的元素，可以将以下代码添加到样式部分的末尾。 这将水平排列所有新元素并将堆叠。

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

以下是更新的jsfiddle。

的jsfiddle

如果要在容器已满后限制添加，则需要编写单独的逻辑来识别它。

要使可放置区域具有滚动条，只需添加overflow:auto到该容器的样式。

#droppable_area{
    //rest of the css
    overflow:auto;
}

一旦内容超过容器，这将添加垂直滚动条。

更新小提琴