title: How drag and drop html inside a section
body: <p>When we drag &quot;Drag Header&quot; to the page-content, we want it always go to inside &lt;section&gt; tag. In the example below, if you drag slowly, it may be dropped out of section tag.</p>
  
  <p>Here is my example: <a href="http://jsfiddle.net/vuktx/9nMqv/44/" rel="nofollow">http://jsfiddle.net/vuktx/9nMqv/44/</a></p>
  
  <p>This image will provide more detail: <a href="http://mangchiase.com/get/9a0fe591-71bc-4f13-861f-0f54e8277f41.image" rel="nofollow">http://mangchiase.com/get/9a0fe591-71bc-4f13-861f-0f54e8277f41.image</a></p>
  
  <p>Thank experts.</p>
  
  <p><code></p>
  
  <pre><code>$('.items ul li div.widget-item').draggable({
  helper: function(e) {
      //return $('&lt;div&gt;').addClass('block').text( $(e.target).text() );
      return $('&lt;div&gt;').attr("style","height: 30px;width:50px;").attr("class","entire-page-template-hover");
  },
  cursor: "move",
  start: function() {
      $(".span12, .span6, .span4, .span3, .span2").addClass("container-border");
      //$(".drop-message").addClass("entire-page-template-hover");
  },
  stop: function() {
      $(".span12, .span6, .span4, .span3, .span2").removeClass("container-border");
  },
  connectToSortable: "#page-content"
  });
  
  $('#page-content').sortable({
  helper: function(e) {
      //return $('&lt;div&gt;').addClass('block').text( $(e.target).text() );
      return $('&lt;div&gt;').attr("style","height: 30px;width:50px;").attr("class","entire-page-template-hover");
  },
  placeholder: 'entire-page-template-hover',
  items: ".widget-item",
  cursor: "move",
  //containment: ".span6, .span12",
  //forcePlaceholderSize: true,
  start: function() {
      $(".span12, .span6, .span4, .span3, .span2").addClass("container-border");
  
  },
  stop: function() {
      $(".span12, .span6, .span4, .span3, .span2").removeClass("container-border");
  },
  update: function (event, ui) {
      // turn the dragged item into a "block"
      ui.item.find('.widget-icon').remove();
      ui.item.find('.hide').removeClass('hide');
      addText();
  },
  change: function (event, ui) {
  
  },
  receive: function (event, ui) {
      addText();
  
  },
  over: function( event, ui ) {
      if ($(this).attr("id") != 'page-content') {
          $(ui.placeholder).css('display', 'none');
      } else {
          $(ui.placeholder).css('display', '');
      }        
      //$(this).find('.drop-message').remove();
  }
  });
  function addText () {
  $('.span12, .span6, .span4, .span3, .span2').each(function() {
      if ($(this).children().length == 0) {
          $(this).html('&lt;div class="widget-item drop-message"&gt;Drop content here&lt;/div&gt;');
      } else if ($(this).children().length &gt; 1) {
          $(this).find('.drop-message').remove();
      }
  });
  }
  addText();
  </code></pre>
  
  <p></code></p>