0

我在下面有以下代码。它在一个更大的 div 中有 div。我只希望“#set” div 移动，而不是其他 div。但是现在用户可以移动 div 中的任何内容。我怎样才能让它只移动大 div“集”？

标题：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 

<style>
  #set { clear:both; float:left; width: 368px;}
  p { clear:both; margin:0; padding:1em 0; }
</style>

<script>
$(function() {
  $( "#set div" ).draggable({ 
    stack: "#set div",
      stop: function(event, ui) {
          var pos_x = ui.offset.left;
          var pos_y = ui.offset.top;
          var need = ui.helper.data("need");

          console.log(pos_x);
          console.log(pos_y);
          console.log(need);

          //Do the ajax call to the server
          $.ajax({
              type: "POST",
              url: "updatecoords.php",
              data: { x: pos_x, y: pos_y, need_id: need}
            })
      }
  });
});
</script>




身体：

<div id="set">

<?

$getcoords = mysql_query("SELECT * FROM coords WHERE needid=6");  
$rows = mysql_fetch_assoc($getcoords);
$x = $rows['x'];  
$y = $rows['y'];  

echo "

<div style='width: 175px; height: 350px; padding: 0.5em; float: left; margin: 0 10px 10px 0; background: white; position:fixed;left:".$x."px; top:".$y."px;' data-need='6' class='column'>

  <div class='portlet'>
    <div class='portlet-header'>Contacts</div>
    <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

  <div class='portlet'>
    <div class='portlet-header'>Notes</div>
    <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

</div>
";

?>

</div>
4

1 回答 1

1

看起来你想移动#set不是元素的直接子#set元素。

$(function() {
    $( "#set > div" ).draggable({ 
        stop: function(event, ui) {
            var pos_x = ui.offset.left;
            var pos_y = ui.offset.top;
            var need = ui.helper.data("need");

            console.log(pos_x);
            console.log(pos_y);
            console.log(need);

            //Do the ajax call to the server
            $.ajax({
                type: "POST",
                url: "updatecoords.php",
                data: { x: pos_x, y: pos_y, need_id: need}
            })
        }
    });
});

演示：Plunker

于 2013-05-02T02:28:56.467 回答