Jquery drag and drop issue with div drag

Question

In my html code my code structure is

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

I need to drag this #lunch div and need to drop in between #dv1 or #dv2, or #dv3 . The main divs (#dv1,2,3) no need to drag.

I used the following jquery code

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

But it is not drag.

If i use this below code --> The elements inside the div is draggable and not able to drop.

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

What I am doing wrong? and How to achieve this? Please help me.

Answer 1

You have used too many brackets in your code here:

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

});

Remove the last line of the snippet above.

Answer 2

You can use html drag and drop.

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

Fiddle : http://plnkr.co/edit/3OMfqActNAm0eccllte4?p=preview