Question

以下是我的示例截图。

我曾尝试拖放。在前两个屏幕截图中，将有拖放。它的工作正常。当初始时会有空盒子。但如果我在拖动框中设置了一些默认值，它将折叠对齐。为什么会这样？以下是我的示例代码：

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

上面是draggable和droppable的代码。如果我在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

使用Jquery拖放填充空白

1 个答案: