Javascript 使用Jquery拖放填充空格

下面是我的示例屏幕截图

我试过拖放。在前2个屏幕截图中将有拖放。工作正常。当首字母中出现空框时。但若我在拖动框中设置一些默认值，它将折叠对齐。为什么会这样？ 下面是我的示例代码：

$(document).ready(function() {

  function makedraggable() {
     $(".qitem2").draggable({
        "revert": "invalid"
     });
  }

  makedraggable();

     $(".box1").droppable({
        "accept": ".qitem2",
        "drop": function(event, ui) {
            if ($(this).find(".qitem2").length) {
                var $presentChild = $(this).find(".qitem2"),
                    currChildId = $presentChild.attr("id"),
                    $currChildContainer = $("#" + currChildId + "-container");                  
               $currChildContainer.append($presentChild);
               $presentChild.removeAttr("style").removeClass("drag-center-in-droppable");
               makedraggable();
            }

            $(ui.draggable).clone().appendTo(this).removeAttr("style").addClass("drag-center-in-droppable");
            $(ui.draggable).remove();

        }
     })
     function makedraggable1() {
     $(".qitem3").draggable({
        "revert": "invalid"
     });
  }

  makedraggable1();
});

PHP代码

<div id="drag_paragraph1">  
<p style="display:inline;font-size:14px;line-height:200%">
In order to polymeric</p><div class="fancy nonEditable" draggable="true"><div class="box4 ui-droppable"></div></div>macromolecules into smaller portions,<div class="fancy nonEditable" draggable="true"><div class="box4 ui-droppable"></div></div>digestive enzymes play a vital role in the of<div class="fancy nonEditable" draggable="true"><div class="box4 ui-droppable"></div></div>absorption of nutrients in the body. Located in the digestive tracts in the bodies of animals, and in the trap in the bodies of carnivorous plants, they facilitate of food inside<div class="fancy nonEditable" draggable="true"><div class="box4 ui-droppable"></div></div>the cells.  
<p></p>
</div>

<div id="qlist2">
                  <div id="di21-container" class="drag-container">
      <div id="di21" class="qitem5 di1 ui-draggable ui-draggable-handle" style="position: relative;">
        cccc      </div>
    </div>

    <div id="di22-container" class="drag-container">
      <div id="di22" class="qitem5 di1 ui-draggable ui-draggable-handle" style="position: relative;">
         bbbb      </div>
    </div>

    <div id="di23-container" class="drag-container">
       <div id="di23" class="qitem5 di1 ui-draggable ui-draggable-handle" style="position: relative;">
           aaaa       </div>
    </div>
     <div id="di24-container" class="drag-container">
       <div id="di24" class="qitem5 di1 ui-draggable ui-draggable-handle" style="position: relative;">
           eeee       </div>
    </div>
     <div id="di25-container" class="drag-container">
       <div id="di25" class="qitem5 di1 ui-draggable ui-draggable-handle" style="position: relative;">
           iiii       </div>
    </div>
     <div id="di26-container" class="drag-container">
       <div id="di26" class="qitem5 di1 ui-draggable ui-draggable-handle" style="position: relative;">
           dddd       </div>
    </div>
      <div id="di27-container" class="drag-container">
       <div id="di27" class="qitem5 di1 ui-draggable ui-draggable-handle" style="position: relative;">
           ffff       </div>
    </div>
                                                </div>

上面是可拖放和可拖放的代码。如果我在div框中设置了一些默认单词，那么拖放操作将被折叠，为什么？如果有人知道答案，请帮助我。提前谢谢。 正在工作的

请尝试此代码

   var oldMouseStart = $.ui.draggable.prototype._mouseStart;
$.ui.draggable.prototype._mouseStart = function(event, overrideHandle, noActivation) {
  this._trigger("beforeStart", event, this._uiHash());
  oldMouseStart.apply(this, [event, overrideHandle, noActivation]);
};

function makedraggable3() {
  $(".qitem5").draggable({
    beforeStart: function() {
            window.source_index = $(this).attr("data-index");
      window.source_html = $(this).html();
    },
    "revert": "invalid"
  });
  $(".box4").droppable({
    "accept": ".qitem5",
    classes: {
      "ui-droppable-active": "ui-state-active",
      "ui-droppable-hover": "ui-state-hover"
    },
    "drop": function(event, ui) {
      window.dest_html = $(this).html();
      window.dest_index = $(this).attr("data-index");
      if (typeof window.dest_html != 'undefined' && window.dest_html != '') {
        switchContent();
      } else {
        var $presentChild = $(this).find(".qitem5"),
          currChildId = $presentChild.attr("id"),
          $currChildContainer = $("#" + currChildId + "-container");
        $currChildContainer.append($presentChild);
        $presentChild.removeAttr("style").removeClass("drag-center-in-droppable");
        makedraggable3();
        $(ui.draggable).clone().appendTo(this).removeAttr("style").addClass("drag-center-in-droppable");
        $(ui.draggable).remove();
      }
    }
  });
}
makedraggable3();
function switchContent() {
  var source_html = $("<div>").addClass("ui-widget-header").addClass("box4").attr("data-index", window.dest_index).append(window.source_html);
  var dest_html = $("<div>").addClass("qitem5").addClass("di1").attr("data-index", window.source_index).append(window.dest_html);

  $("[data-index=" + window.dest_index + "]").closest(".drag-container").html(source_html);
  $("[data-index=" + window.source_index + "]").closest(".drag-container").html(dest_html);
  $(":ui-draggable").draggable("destroy");
  makedraggable3();
}

您只需要将html映射为

 <div>
  Lorem Ipsum is simply
  <div class="drag-container">

    <div class="box4" data-index='drop-1'>Hiii</div>
  </div>
  text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  <div class="drag-container">
    <div class="box4" data-index='drop-2'></div>
  </div> ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing
  <div class="drag-container">
    <div class="box4" data-index='drop-3'></div>
  </div> passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<hr/>
<div>
  <div id="di21-container" class="drag-container">
    <div id="di21" class="qitem5 di1" data-index="drag-1">
      dummy
    </div>
  </div>
  <div id="di21-container" class="drag-container">
    <div id="di22" class="qitem5 di1" data-index="drag-2">
      textts
    </div>
  </div>
  <div id="di21-container" class="drag-container">
    <div id="di23" class="qitem5 di1" data-index="drag-3">
      woww
    </div>
  </div>
</div>

试试看，这应该行得通

这里有工作