0

我让 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>
4

2 回答 2

0

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

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

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

于 2013-05-11T20:51:08.383 回答
0

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

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 包含一个您可以使用的偏移属性。看看维基：

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

并且 Resizable 不包含偏移量，但它包含元素，您可以从中获取偏移量。看看维基：

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

可拖动时

pos_x = ui.offset.left;

调整大小时

pos_x = $(ui.element).offset().left;
于 2013-05-11T20:52:20.887 回答