使用Jquery拖放填空

Question

下面是我的示例截图。

我尝试过拖放。在前 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 框中将某些单词设置为默认值，那么拖放将被折叠，这是为什么？如果有人知道解决方案，请帮助我。提前致谢。 工作的https://jsfiddle.net/c62tpc45/2/

Answer 1

试试这个代码，

   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>

试一试，应该可以的。

这里正在工作jsfiddle