0
У меня есть следующий код JSfiddle (ссылка ниже) . У меня возникают проблемы с его исправлением, поэтому элементы можно перетаскивать в область белого ящика.Jquery drag + drop issue
Сценарий: поле пользователя 1 является базовым, а все остальные поля пользователя должны находиться в белом содержимом DIV пользователя 1. Затем, если, например, вы перетаскиваете пользователя 4 в пользователя 2, пользователь 4 должен находиться в белом поле содержимого пользователя 2 и так далее. На данный момент он просто перетащит в серой части окна пользователя 2.
Любые идеи о том, как настроить DIV?
Я знаю, что его делать с установкой HTML просто не могу думать о том, как это исправить
https://jsfiddle.net/euf1s9gc/3/
'use strict'
$(document).ready(function(){
var resp =[{"id":"1","name":"User","title":"1","parentID":"9","base":"1"},
{"id":"2","name":"User","title":"2","parentID":"1","base":"0"},
{"id":"3","name":" User","title":"3","parentID":"1","base":"0"},
{"id":"4","name":"User","title":"4","parentID":"1","base":"0"}];
createList(resp);
setDragDrop();
function createList(data){
jQuery.each(data, function() {
var baseUsed =false;
if(this.base == 1 && baseUsed ==false){
//Problem in the setup of the HTML
$('.containers').append("<div class='popup' id='parentID_"+this.id+"'><div class='header'>"+this.name+" ("+this.title+")</div><div class='content'></div></div>");
baseUsed = true;//to stop replication
}else{
$('#parentID_'+this.parentID).append("<div id='parentID_"+this.id+"' class='popup'><div class='header'>"+this.name+" ("+this.title+")</div><div class='content'></div></div>");
}
});
}
function setDragDrop(){
$('.containers .popup').droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
// accept: '.object',
out: function() {
$(this).droppable("option", "disabled", false);
},
drop: function(event, ui) {
var targetId = this.id;
var userId = (ui.draggable).get(0).id;
$(ui.draggable).addClass("insidePopup");
ui.draggable.detach().appendTo($(this));
}
});
$('.popup').draggable({
helper: 'clone',
containment:"parent"
});
}
});