Пользовательское перетаскивание на div

Question

Мне нужно специальное перетащить на div, как подсказывает название. Идея состоит в том, чтобы панель, подобная img ниже.

1. Вся область должна быть перетаскиваемым.
2. Белые блоки, как показано, должны иметь разные размеры, но я думаю, что это относится к этому вопросу.
3. Белые блоки будут загружаться по мере необходимости, когда пользователь «перетаскивает» в любом направлении (я буду использовать ajax для этого)
4. будет с помощью ASP.NET MVC для веб-сайта и JQuery

цель состоит в том, чтобы реализовать пользовательскую карту для учебного игрового проекта. Мне не нужно какое-либо окончательное решение. Любые намеки или подсказки будут глубоко оценены.

Answer 1

Вы можете создать контейнер, сделать что перетаскивать с Jquery UI, а затем добавить коробки внутри него

https://jqueryui.com/draggable/

https://jsfiddle.net/ytxedata/4/

HTML

<div id="draggable"> 
    <div class="box" style="left:10px;top:10px;width:50px;height:60px;"></div> 
    <div class="box" style="left:80px;top:40px;width:65px;height:45px;"></div> 
    <div class="box" style="left:150px;top:70px;width:50px;height:70px;"></div> 
    <div class="box" style="left:220px;top:10px;width:60px;height:30px;"></div> 
</div> 

JS

$(document).ready(function() { 
    $("#draggable").draggable(); 
}); 

CSS

#draggable { 
    width:300px; 
    height:200px; 
    overflow:hidden; 
    background-color:blue; 
    position:relative; 
} 

.box { 
    background-color:red; 
    position:absolute; 
} 

EDIT:

Чтобы добавить больше коробки из этого примера вы можете использовать:

function addBox(x, y, w, h) { 
    x = (x === 0) ? '0' : x + 'px'; 
    y = (y === 0) ? '0' : y + 'px'; 
    w = (w === 0) ? '0' : w + 'px'; 
    h = (h === 0) ? '0' : h + 'px'; 
    var $boxes = $('#draggable .box'); 
    var $newBox = $('<div class="box"></div>'); 
    $newBox.css({ 'left': x, 'top': y, 'width': w, 'height': h }); 
    if ($boxes.length === 0) 
     $('#draggable').html($newBox); 
    else 
     $newBox.insertBefore($boxes.first()) 
} 

addBox(10, 120, 100, 60); 

Answer 2

использование Jquery UI перемещаемой

$("#draggable").draggable() 

использовать также его события для использования Аякс

$("#draggable").draggable({ 
    start: function() { 
    //if data is not already getten 
    //some ajax code in there 
    } 
}); 

For more information