拖拽使用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