Javascript jQuery可拖动+；可拖放+；筑巢

我对jQuery完全陌生，但我已经成功地组装了一个很好的小应用程序，可以拖动、放置和旋转项目

正在寻找有关查找函数的任何指导建议，该函数将允许我执行以下操作（对任何术语问题表示歉意）：

• 创建一个可拖放的div，例如一个小方框（done）
• 创建一个可拖动的div，例如图标（完成）
• 将图标拖到较大的div中
• 然后可以拖动较大的div，同时也可以携带图标，并在移动的所有内容上向我的PHP脚本发送AJAX帖子

我发现了这一点：然而，它将所有东西都捕捉到结构上，并且不允许自由移动。我也无法找出其中的哪个函数导致父对象移动子对象

感谢您的指导、文章或示例链接！在我的休息时间里，几天的搜索并没有带来任何结果

以下是我的项目中的一些代码片段：

父项：

  $( ".box" ).resizable({
stack: "#set .box",
start: function(){
    ifr = $('iframe');
    var d = $('<div></div>');

    $('.room').append(d[0]);
    d[0].id = 'temp_div';
    d.css({position:'absolute'});
    d.css({top: ifr.position(), left:0});
    d.height(ifr.height());
    d.width('100%');
},
stop: function(event, ui) {
      var w = ui.size.width;
      var h = ui.size.height;
      var hdvzth = ui.helper.data("hdvzth");
      var fid = ui.helper.data("fid");
      var rid = ui.helper.data("rid");
      var hid = ui.helper.data("hid");
          $.ajax({
              type: "POST",
              url: "<?php print $position; ?>",
              data: { h: h, w: w,  fid:fid, hid:hid, rid:rid }
            }).done(function( msg ) {});
    $('#temp_div').remove();


      }
}


).draggable({

  stop: function(event, ui) {

      var pos_x = ui.position.left;
      var pos_y = ui.position.top;
      var hdvzth = ui.helper.data("hdvzth");
      var hid = ui.helper.data("hid");
      var fid = ui.helper.data("fid");
      var rid = ui.helper.data("rid");

      //Do the ajax call to the server
      $.ajax({
          type: "POST",
          url: "<?php print $position; ?>",
          data: { x: pos_x, y: pos_y, fid:fid, rid:rid, hid:hid }
        }).done(function( msg ) { });
  }
});

$（“.box”）。可调整大小({
堆栈：“set.box”，
开始：函数（）{
ifr=$（'iframe'）；
变量d=$（''）；
$（'.room'）。追加（d[0]）；
d[0]。id='temp_div'；
d、 css（{位置：'absolute'}）；
d、 css（{top:ifr.position（），left:0}）；
d、 高度（ifr.height（））；
d、 宽度（100%）；
},
停止：功能（事件、用户界面）{
var w=ui.size.width；
var h=ui.size.height；
var hdvzth=ui.helper.data（“hdvzth”）；
var fid=ui.helper.data（“fid”）；
var rid=ui.helper.data（“rid”）；
var hid=ui.helper.data（“hid”）；
$.ajax({
类型：“POST”，
url:“”，
数据：{h:h，w:w，fid:fid，hid:hid，rid:rid}
}).done（函数（msg）{}）；
$（'temp#u div'）。删除（）；
}
}
).拖拉({
停止：功能（事件、用户界面）{
var pos_x=ui.position.left；
var pos_y=ui.position.top；
var hdvzth=ui.helper.data（“hdvzth”）；
var hid=ui.helper.data（“hid”）；
var fid=ui.helper.data（“fid”）；
var rid=ui.helper.data（“rid”）；
//对服务器执行ajax调用
$.ajax({
类型：“POST”，
url:“”，
数据：{x:pos_x，y:pos_y，fid:fid，rid:rid，hid:hid}
}).done（函数（msg）{}）；
}
});

子项，又名“图标”：

$（“.piece”）。可调整大小({
堆栈：“#集.块”，
开始：函数（）{
ifr=$（'iframe'）；
变量d=$（''）；
$（'.piece'）。追加（d[0]）；
d[0]。id='temp_div'；
d、 css（{位置：'absolute'}）；
d、 css（{top:ifr.position（），left:0}）；
d、 高度（ifr.height（））；
d、 宽度（100%）；
},
停止：功能（事件、用户界面）{
var x=ui.position.left；
var y=ui.position.top；
var w=ui.size.width；
var h=ui.size.height；
var hdvzth=ui.helper.data（“hdvzth”）；
var fid=ui.helper.data（“fid”）；
var pid=ui.helper.data（“pid”）；
var hid=ui.helper.data（“hid”）；
$.ajax({
类型：“POST”，
url:“”，
数据：{h:h，w:w，x:x，y:y，fid:fid，hid:hid，pid:pid}
}).done（函数（msg）{}）；
$（'temp#u div'）。删除（）；
}
}).拖拉({
停止：功能（事件、用户界面）{
var pos_x=ui.position.left；
var pos_y=ui.position.top；
var pid=ui.helper.data（“pid”）；
var hid=ui.helper.data（“hid”）；
var fid=ui.helper.data（“fid”）；
$.ajax({
类型：“POST”，
url:“”，
数据：{x:pos_x，y:pos_y，fid:fid，pid:pid，hid:hid}
}).done（函数（msg）{}）；
}
});

1。当您拖动较大的div时，是否要将其放入提交容器或其他容器中？2.关于ajax请求：您到底想向服务器发布什么？@Bluedayz，想象一下这就像一个公寓家具布置应用程序——只需在容器中组织图标，以及无限容器和图标，这些图标可以在父容器中的任何位置。代码片段添加！

$( ".piece" ).resizable({

stack: "#set .piece",
start: function(){
    ifr = $('iframe');
    var d = $('<div></div>');

    $('.piece').append(d[0]);
    d[0].id = 'temp_div';
    d.css({position:'absolute'});
    d.css({top: ifr.position(), left:0});
    d.height(ifr.height());
    d.width('100%');
},
stop: function(event, ui) {

      var x = ui.position.left;
      var y = ui.position.top;
      var w = ui.size.width;
      var h = ui.size.height;
      var hdvzth = ui.helper.data("hdvzth");
      var fid = ui.helper.data("fid");
      var pid = ui.helper.data("pid");
      var hid = ui.helper.data("hid");
          $.ajax({
              type: "POST",
              url: "<?php print $position; ?>",
              data: { h: h, w: w, x: x, y: y, fid:fid, hid:hid, pid:pid }
            }).done(function(msg){});
            $('#temp_div').remove();
      }
}).draggable({

  stop: function(event, ui) {

      var pos_x = ui.position.left;
      var pos_y = ui.position.top;
      var pid = ui.helper.data("pid");
      var hid = ui.helper.data("hid");
      var fid = ui.helper.data("fid");

      $.ajax({
          type: "POST",
          url: "<?php print $position; ?>",
          data: { x: pos_x, y: pos_y, fid:fid, pid:pid, hid:hid }
        }).done(function( msg ) {});
  }
});