JQuery將元素拖放到div上

我正在使用JQuery UI，更具體地說是Draggable和Sortable。JQuery將元素拖放到div上

目前，我有以下的標記

<div class="col-lg-3" id="ddForm"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <span class=""></span>Elements 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in"> 
      <ul class="list-group"> 
       <li class="list-group-item draggable"><span class="fm-header-icon"></span>Heading</li> 

       <li class="list-group-item draggable"><span class="fm-textbox-icon"></span>Text Box</li> 

       <li class="list-group-item draggable"><span class="fm-textarea-icon"></span>Text Area</li> 

      </ul> 
     </div> 
    </div> 
</div> 

<div class="col-lg-9 bgGrey sortable"> 


</div>

我已經設置了的jsfiddle這裏JSFiddle

我所試圖做的是創造一種形式的助洗劑。所以在左側面板中，我顯示了不同的表單元素。然後，您可以將它們拖到灰色div，並且該元素應該佔據div的寬度。基本上，我試圖建立類似於以下的東西Link

我已經設法使表單元素可拖動，但我的第一個問題是能夠將它們放到我的div。我會如何去做這件事？

任何意見讚賞。

感謝

來源

2016-01-18 kate_hudson

變化connectToSortable: "#sortable"到

connectToSortable: ".sortable"

你的jQuery的應該是這樣的

$(function() { 
    $(".sortable").sortable({ 
     revert: true 
    }); 
    $(".draggable").draggable({ 
     connectToSortable: ".sortable", 
     helper: "clone", 
     revert: "invalid" 
    }); 
    $("ul, li").disableSelection(); 
});

JsFiddle

來源

2016-01-18 17:50:30

JQuery將元素拖放到div上

回答

相關問題