自定义拖动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;
}

修改

要从该示例添加更多框，您可以使用：

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({
  start: function() {
  //if data is not already getten 
  //some ajax code in there
  }
});

还可以使用其事件来使用ajax

2015-06-25 09:20:25,654 file1 text2
2015-06-25 09:20:23,654 file1 text1
test text1 belongs to the row above
2015-06-25 09:20:27,654 file1 text3

For more information