Javascript 自定义拖放div

我需要一个自定义拖拽div作为标题建议。 这个想法是要有一个像下面的img这样的面板

---

整个区域都需要拖拽

如图所示，白色方块需要有不同的尺寸，但我认为这与此相关

当用户向任何方向“拖动”时，将根据需要加载白色块（为此，我将使用ajax）

网站和jQuery将使用ASP.NETMVC

目的是实现一个学术游戏项目的自定义地图。

---

我不需要任何最终的解决方案。任何提示或提示都将不胜感激。

您可以创建一个容器，使用jquery ui将其拖动，然后在其中添加框

HTML

CSS

编辑：

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

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);

函数添加框（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$box=$（“#draggable.box”）；
变量$newBox=$（''）；
$newBox.css（{'left'：x，'top'：y，'width'：w，'height'：h}）；
如果（$box.length==0）
$（'#draggable'）.html（$newBox）；
其他的
$newBox.insertBefore（$box.first（））
}
地址盒（10、120、100、60）；

使用jquery ui可拖动

$( "#draggable" ).draggable()

还可以使用它的事件来使用ajax

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

---

你被困在什么地方了吗？你有某种类型的原型吗？还没有原型，因为我一直在想一些东西，可以让我滚动容器分区的内容。那么白框是否需要拖动？标题是这样写的，但你的描述并不完整。整个区域都需要拖拽。白色框应紧跟其后。该可拖动区域需要始终填充整个客户端区域。当拖动事件发生时，是否需要重新计算其宽度/高度？@HelderMPinhal是的，您可以使用jquery

css

函数设置其新的左、顶、宽度和高度，该函数可在可拖动停止事件中调用：感谢您的帮助和示例。关于css属性集，这会不会将该区域恢复到其原始状态，而不是允许用户继续拖动are以查找新框？@HelderMPinhal我不确定我是否理解。根据您的使用情况，您可以使用drag或stop事件，并在这个fiddle（）中，将left和top设置为您想要的任何值（如果您希望它填充父对象或页面，则设置为0），这是一个示例的副本，带有几个tweek，可拖动区域从客户端的完整大小开始，但当我拖动它时，我希望它仍然适合客户端区域，并将新内容显示到我们拖动的位置。

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);

$( "#draggable" ).draggable()

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