Question

我得到了jquery变量来更新高度宽度和拖动div时的位置，但我需要它们在调整大小时也这样做....我怎么能这样做？这是我现在用来获取变量并将它们发送到php文档的代码：

<?
$query = mysql_query("SELECT * FROM users WHERE username='derekshull'");
$rows = mysql_fetch_array($query);
$googlewebx = $rows['googlewebx'];
$googleweby = $rows['googleweby'];
$googlewebh = $rows['googlewebh'];
$googlewebw = $rows['googlewebw'];

$googleimagex = $rows['googleimagex'];
$googleimagey = $rows['googleimagey'];
$googleimageh = $rows['googleimageh'];
$googleimagew = $rows['googleimagew'];

$googlenewsx = $rows['googlenewsx'];
$googlenewsy = $rows['googlenewsy'];
$googlenewsh = $rows['googlenewsh'];
$googlenewsw = $rows['googlenewsw'];

$wikix = $rows['wikix'];
$wikiy = $rows['wikiy'];
$wikih = $rows['wikih'];
$wikiw = $rows['wikiw'];

$wolfx = $rows['wolfx'];
$wolfy = $rows['wolfy'];
$wolfh = $rows['wolfh'];
$wolfw = $rows['wolfw'];

$twitterx = $rows['twitterx'];
$twittery = $rows['twittery'];
$twitterh = $rows['twitterh'];
$twitterw = $rows['twitterw'];
?>

<html>
<head>


 <style>
  .resizable { color: white; width: 1px; height: 1px; padding: 0.1em; bottom: 0; left: 0; }
  .resizable h3 { text-align: center; margin: 0; }
  </style>


<style>
#set div.resizable {
    background: rgba(0, 157, 255, 0.9);
    color: black;
    float: left;
    margin: 0 10px 10px 0;

    padding: 0.5em;
}
  #set { clear:both; float:left; width: 368px;}
  p { clear:both; margin:0; padding:1em 0; }
</style>
<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> 

<script>
function stop(ui, type) {
    var pos_x;
    var pos_y;
    var window_width;
    var window_height;
    var need;
    if (type == 'draggable') {
        pos_x = ui.offset.left;
        pos_y = ui.offset.top;
        window_width = window.innerWidth;
        window_height = window.innerHeight;
        need = ui.helper.data("need");
    } else if (type == 'resizable') {
        pos_x = $(ui.element).offset().left;
        pos_y = $(ui.element).offset().top;
        window_width = window.innerWidth;
        window_height = window.innerHeight;
        need = ui.helper.data("need");
    }

    var width;
    var height;

    if (need == 1) {
        width = $("#web").width();
        height = $("#web").height();
    }

    if (need == 2) {
        width = $("#image").width();
        height = $("#image").height();
    }

    if (need == 3) {
        width = $("#wiki").width();
        height = $("#wiki").height();
    }

    if (need == 4) {
        width = $("#twitter").width();
        height = $("#twitter").height();
    }

    if (need == 5) {
        width = $("#googlenews").width();
        height = $("#googlenews").height();
    }

    if (need == 6) {
        width = $("#wolf").width();
        height = $("#wolf").height();
    }

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

    //Do the ajax call to the server
    alert(' x:' + pos_x +
        ' y:' + pos_y +
        ' ned_id:' + need +
        ' width:' + width +
        ' height:' + height +
        ' window_width:' + window_width +
        ' window_height:' + window_height);
}

$("#set div").draggable({
    stack: "#set div",
    preventCollision: true,
    containment: $('#main_content'),
    stop: function (event, ui) {
        stop(ui, 'draggable');
    }
});

$(".resizable").resizable({
    stop: function (event, ui) {
        stop(ui, 'resizable');
    }
});
</script>




<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>15:11 Project | You • Your Community • Your World</title>
</head>
<body>


<form action='' method='post'>
<fieldset><center>
<input type='search' name='q' /><input type='submit' value='Search' name='submit' />
</fieldset></center>
</form>


<div id="main_content" style="position: fixed; bottom: 0; left: 0; width:100.8%; margin:0 auto; height:95.1%; background-color: #ffffff; color: #000000;">

<div id="set">





<?
if(isset($_POST['q'])){
?>
<div id='web' style='overflow:hidden; left: 5%; top: 5%; width: 20%; height: 15%; position:fixed !important;' class='resizable ui-widget-content' data-need='1'>
<?php

enter code here for div 1.

echo "</div>";
}
?>









<?
if(isset($_POST['q'])){
?>
<div id='image' style='overflow:hidden; height: 19%; width: 32%; left: 60%; top: 12%; position:fixed !important;' class='resizable ui-widget-content' data-need='2'><center>
<?php

Enter code here for div 2
echo "</center></div>";
}
?>








<?
if(isset($_POST['q'])){
?>
<div id='wiki' style='overflow:hidden; left: 5%; top: 36%; height: 17%; width: 25%; position:fixed !important;' class='resizable ui-widget-content' data-need='3'>
<?php

Enter div 3.
}
?>
</div>



</div>

</div>

Answer 1

您可以将功能附加到停止事件......

$(function() { 
    $( ".resizable" ).resizable({
        stop: function(){
            // Do your updates here
        }
    }); 
});

工作小提琴： http://jsfiddle.net/zkDHJ/

Answer 2

可调整大小的函数具有相同的事件停止，您可以创建一个函数来执行您在可拖动停止中执行的操作并从可调整大小的停止中调用它

http://api.jqueryui.com/resizable/#event-stop

$(function() { 
 $( ".resizable" ).resizable({
  stop: function() {
   // call the same function as in draggable event stop
  }
 });
});

我建议创建一个函数来调用这两个事件，如

function stop(ui, type) {
 // your code
}

然后从两个事件中调用它：

$( ".resizable" ).resizable({
 stop: function(event, ui) {
  stop(ui, 'resizable');
)};

$( ".draggable" ).resizable({
 stop: function(event, ui) {
  stop(ui, 'draggable');
 }
)};

编辑：您看到可以看到这个jsfiddle显示代码正常工作： http://jsfiddle.net/v8efG/1/

与draggable和resizable返回的对象有所不同。

Draggable包含您可以使用的偏移属性。看一下wiki：

http://api.jqueryui.com/draggable/#event-stop

Resizable不包含偏移量，但它包含元素，您可以从中获取偏移量。看一下wiki：

http://api.jqueryui.com/resizable/#event-stop

可拖动时

pos_x = ui.offset.left;

可调整大小时

pos_x = $(ui.element).offset().left;

拖动并调整Jquery的大小时更新

2 个答案: