Question

我是jQuery的新手，但已经设法组合了一个很棒的小应用程序，可以拖动，删除和旋转项目。

寻找有关查找可让我执行以下操作的功能的任何指导建议（为任何术语问题道歉）：

创建一个可投放的div，例如一个小方框（已完成）
创建一个可拖动的div，例如图标（已完成）
将图标拖到较大的div
然后能够拖动较大的div，同时还带有图标，并在移动的所有内容上为我的PHP脚本执行AJAX帖子。

我发现了这个：http://boagworld.com/dev/creating-a-draggable-sitemap-with-jquery/然而，它将一切都扣到了结构上，并没有真正允许自由移动。我也无法弄清楚哪个函数导致父母移动孩子。

感谢您提供任何指导，文章或示例链接！在停工期间进行了几天的搜索并没有带来任何结果。

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

父项：

  $( ".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 ) { });
  }
});

儿童项目，又名“图标”：

$( ".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 ) {});
  }
});

jQuery Draggable + Droppable +嵌套

0 个答案: