0
我得到的jQuery变量来更新高度的宽度和位置，当divs被拖动，但我需要他们做同样的时候他们的大小调整....我怎么能做到这一点？这里是我的代码，我现在使用得到变量，并将它们发送到PHP文件：更新时拖动和调整大小Jquery
<?
$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>
我更新了我的代码，但没有奏效。它甚至没有给出调整大小的选项。仍然可以拖动它。 – user2362601 2013-05-11 21:01:42
我已经添加了一个工作代码的小提琴。你必须在别的地方遇到问题。 – eidsonator 2013-05-11 21:08:56