jQuery的阻力，並與格拖動

Question

下降的問題在我的HTML代碼我的代碼結構

<form name="mainform" class="mainclass"> 
    <div id="dv1"> 
     <ul> 
      <li>some content and form elements here</li> 
     </ul> 
    </div> 
    <div id="dv2"> 
     <ul> 
      <li>some content and form elements here</li> 
     </ul> 
    </div> 
    <div id="dv3"> 
     <ul> 
      <li>some content and form elements here</li> 
     </ul> 
    </div> 
    <!---- Div need to drag---> 
    <div id="lunch"> 
     <ul> 
      <li>some content and form elements here</li> 
     </ul> 
    </div> 
</form> 

我需要拖動此#lunch股利和需要#dv1 or #dv2, or #dv3之間下降。主分區(#dv1,2,3)無需拖動。

我用下面的jQuery代碼

$(function() { 
    $(".mainclass div").sortable({ 
     opacity: 0.8, 
     cursor: 'move', 
     update: function() {} 
    }); 
}); 

但它不能拖。

如果我使用下面的代碼 - > div內的元素是可拖動的，不能放下。

$(function() { 
    $("#ln_brk").sortable({ 
     opacity: 0.8, 
     cursor: 'move', 
     update: function() {} 
    }); 
}); 

我在做什麼錯了？以及如何實現這一目標？請幫幫我。

Answer 1

你已經在你的代碼在這裏用了太多的括號：

$(function() { 
    $(".mainclass div").sortable({ 
     opacity: 0.8, 
     cursor: 'move', 
     update: function() {} 
    }); 
}); 

}); 

刪除片段的最後一行上面。

Answer 2

您可以使用html拖放。

<form name="mainform" class="mainclass"> 
     <div id="dv1" ondragenter="return dragEnter(event)" 
    ondrop="return dragDrop(event)" 
    ondragover="return dragOver(event)"> 
     <ul> 
      <li>some content and form elements here</li> 
     </ul> 
     </div> 
     <div id="dv2" ondragenter="return dragEnter(event)" 
    ondrop="return dragDrop(event)" 
    ondragover="return dragOver(event)"> 
     <ul> 
      <li>some content and form elements here</li> 
     </ul> 
     </div> 
     <div id="dv3" ondragenter="return dragEnter(event)" 
    ondrop="return dragDrop(event)" 
    ondragover="return dragOver(event)"> 
     <ul> 
      <li>some content and form elements here</li> 
     </ul> 
     </div> 
     <div id="lunch" draggable="true" ondragstart="return dragStart(event)"> 
     <ul> 
      <li>some content and form elements here</li> 
     </ul> 
     </div> 
    </form> 

小提琴：http://plnkr.co/edit/3OMfqActNAm0eccllte4?p=preview