拖放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

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

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

以下是更新后的jsfiddle。

jsfiddle

如果你想限制增加后的容器是满的，你需要编写一个单独的逻辑来确定。

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

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

这会在内容超过容器时立即添加垂直滚动条。

updated fiddle

Answer 2

你考虑加入浮到你的小盒子？

如果你添加浮动到你的元素，他们将开始填充你拖动的区域。

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