0

divがドラッグされたときに高さの幅と位置を更新するjquery変数を取得しましたが、サイズ変更されたときに同じことを行う必要があります....どうすればこれを行うことができますか? 変数を取得して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 および resizing によって返されるオブジェクトとは違いがあります。

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 に答える