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