0
私は以下のJSfiddleコード（下のリンク） を持っています。私は項目を白いボックスの領域内にドラッグできるようにそれを修正する問題を抱えています。Jqueryドラッグ・ドロップの問題
シナリオ：ユーザー1ボックスはベースであり、他のすべてのユーザーボックスはユーザー1ホワイトコンテンツDIV内にある必要があります。次に、例えばユーザ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"
});
}
});