title: Jquery Drag and Drop with text in div into smaller div
body: <p>First, I use Laravel 4, and some plugins like Bootstrap, jQuery, jQuery-ui...</p>
  
  <p>I have a problem with jQuery UI draggable/Droppable.</p>
  
  <p>I have a table full of divs, with a size that I don't want to change. It's a horizontal calendar with days at left, hours at top. When I drag and drop a little "div" with only "event" as text, it's ok. But when I have a text like "VERY BIG TITLE FOR EVENT", the div is 'splitted' in many part (see jsFiddle below). I wanted to be able to resize the event. For example, if the event need to be "ON" at 8:00am until 4:00pm, the draggable event can be dropped at the "8:00" column, and can be resized to "4:00pm"... But with that "split" problem, I will not be able to do that.</p>
  
  <pre><code>for (var j = 0; j &lt; 24; j++){
      $("#creneau"+i).append("&lt;div class='creneau' id='creneau"+i+"-"+j+"' style='display: inline-block; float: left; margin 0; width: 40px; height: 20px; '&gt;&lt;/div&gt;");
      $("#creneau"+i+"-"+j).droppable({
          appendTo: "body",
          tolerance: "pointer",
          accept: ".external-event",
          drop: function(event, ui) {        
              $(this).append($(ui.draggable));
          }
      });
  }
  
  $(".external-event").draggable({
      appendTo: "#hours-creneau",
      cursor: "move",
      helper: 'clone',
      revert: "invalid"
  });
  </code></pre>
  
  <p>Here, the jsFiddle link for ALL the code (little big). <a href="http://jsfiddle.net/n3Smt/" rel="nofollow">Link to jsFiddle</a></p>
  
  <p>My tab is really "large" on jsFiddle, sorry about that. You maybe will need to resize...</p>