Php 拖动Jquery并调整其大小时更新
我让jquery变量在拖动div时更新高度、宽度和位置，但在调整div的大小时，我需要它们做同样的操作……我如何做到这一点？下面是我现在用来获取变量并将其发送到php文档的代码：Php 拖动Jquery并调整其大小时更新,php,jquery,html,resize,drag,Php,Jquery,Html,Resize,Drag,我让jquery变量在拖动div时更新高度、宽度和位置，但在调整div的大小时，我需要它们做同样的操作……我如何做到这一点？下面是我现在用来获取变量并将其发送到php文档的代码： <? $query = mysql_query("SELECT * FROM users WHERE username='derekshull'"); $rows = mysql_fetch_array($query); $googlewebx = $rows['googlewebx']; $googleweby
<?
$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>
您可以将函数附加到停止事件
$(function() {
$( ".resizable" ).resizable({
stop: function(){
// Do your updates here
}
});
});
工作小提琴：
可调整大小的函数具有相同的事件停止，您可以创建一个函数来执行在可拖动停止中执行的操作，并从可调整大小的停止调用它
我建议创建一个函数来调用这两个事件，例如
function stop(ui, type) {
// your code
}
然后从两个事件调用它：
$( ".resizable" ).resizable({
stop: function(event, ui) {
stop(ui, 'resizable');
)};
$( ".draggable" ).resizable({
stop: function(event, ui) {
stop(ui, 'draggable');
}
)};
编辑：您可以看到这个JSFIDLE显示您的代码工作：
这与可拖动和可调整大小返回的对象不同
DragTable包含一个可以直接使用的偏移量属性。看看维基：
和Resizeable不包含偏移量，但它包含元素，您可以从中获取偏移量。看看维基：
可拖动时
pos_x = ui.offset.left;
可调整大小时
pos_x = $(ui.element).offset().left;
我更新了我的代码，但那不起作用。这使得它甚至没有给出调整大小的选项。但我仍然可以拖动它。我已经添加了一个工作代码。你肯定在其他地方有问题。我更新了我的代码，但那不起作用。这使得它甚至没有给出调整大小的选项。但仍然可以拖动它。它现在可以调整大小，但不会像拖动时那样保存位置和大小。请更新代码以查看是否有任何其他问题，因为代码与此相同，它应该以任何方式工作。我更新了脚本中的代码。这使它们无法拖动或调整大小。我还在主体中添加了div。总共有6个div…我只发布了前2个div。您在使用a）的停止功能后关闭）；你不应该那样做。把它们拿出来，它就会起作用。
pos_x = $(ui.element).offset().left;