Javascript — перетащите заполнить пробелы с помощью Jquery

Question

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, перетаскивание будет свернуто. Почему? Если кто-нибудь знает решение, пожалуйста, помогите мне. Заранее спасибо.
Рабочий https://jsfiddle.net/c62tpc45/2/

0

drag-and-drop javascript jquery jquery-ui php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Попробуйте этот код,

   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

1