Question

我在下面有以下代码。它在一个更大的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>

Answer 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

Jquery所有div都移动但只需要一个移动

1 个答案: