フォーム wysiwyg ビルダーを作成していますが、サイズ変更可能な jquery プラグインに問題があります。ページ上のアイテムのサイズを変更すると、ズームがうまくいかないようです。ここでドラッグ可能の回避策を見つけました: Jquery draggable with zoom problem
しかし、サイズ変更可能の同じ回避策を見つけることができません。シナリオは、サイズ変更可能でドラッグ可能なアイテムを作成し、ズームインまたはズームアウトすると、そのアイテムが含まれている親の外に移動しているように見える場合です。これはここで確認できます: http://drniermanoptometry.cu.cc/Main/Forms_Module/editForm.php/?name=horizontal -clickersearch.html 注: サイズ変更可能なドラッグ可能な項目を作成するには、割り当ての [いいえ] ボタンをクリックします。そして、control ++を使用してズームアウトします
コンテインメントを親に設定し、CSS の位置を無駄に相対的に設定しました。
サイズ変更可能には他にもいくつかの問題があります。アイテムのサイズを変更すると、アイテムを右端までドラッグできず、FF でドラッグ可能が機能しません。もしかして関係？ 更新: auto に設定されたマージンに問題があることがわかったので、問題を回避するためにサイズ変更可能なコンテナーの左側を修正しました。しかし、自動マージンの回避策があるかどうかを知りたいです。この男は同じ問題を抱えています... http://www.webdeveloper.com/forum/showthread.php?236987-jQuery-resizable-with-margin-0-auto
以下のコード:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('.create').click(function(){
var jquerybox = $('<div/>' , {class: 'blocked form-item' , width: '100px', height: '20px' , background: 'red'} );
var zoom = $('#form-preview').css('zoom');
var canvasHeight = $('#form-preview').height();
var canvasWidth = $('#form-preview').width();
jquerybox.resizable({
containment: 'parent'
});
jquerybox.draggable({
containment: 'parent',
drag: function(evt,ui)
{
// zoom fix
ui.position.top = Math.round(ui.position.top / zoom);
ui.position.left = Math.round(ui.position.left / zoom);
// don't let draggable to get outside of the canvas
if (ui.position.left < 0)
ui.position.left = 0;
if (ui.position.left + $(this).width() > canvasWidth)
ui.position.left = canvasWidth - $(this).width();
if (ui.position.top < 0)
ui.position.top = 0;
if (ui.position.top + $(this).height() > canvasHeight)
ui.position.top = canvasHeight - $(this).height();
}
});
$('#form-preview').append(jquerybox);
});
});
function updateItem(Item){
//ajax call to update script
}
</script>
<style>
.blocked{
display:block;
background: red;}
#form-preview{
height: 550px;
width: 600px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
}
.centered{
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div id = "editbar">
<form action="Idkyet" method = "POST">
<table>
<tr>
<th>Type</th>
<th>Allocated</th>
</tr>
<?
error_reporting(E_ALL);
ini_set('display_errors', '1');
if(isset($_GET['name'])){
require_once '../../db_connect.php';
$sqlpre = 'SELECT id FROM forms WHERE name = "' . $_GET['name'] . '";';
$res = $mysqli->query($sqlpre);
$rds = $res->fetch_array();
$id = $rds['id'];
$res->free();
$sql = 'SELECT * FROM form_fields WHERE form_id = ' . $id ;
$res = $mysqli->query($sql);
if($res){
while($rds = $res->fetch_assoc()){
echo '<tr>';
echo '<td><input value = " ' . $rds['type'] . ' "type="textarea"></td>';
echo '<td><input class = "create centered" type="button" value = ' . (($rds['allocated'] == 1) ? 'Yes' : 'NO') . '></td>';
echo '</tr>';
}
}
}
?>
</table>
</form>
<div id = "form-preview">
<div class = "blocked"height = "20px"></div>
</div>
</div>
</body>
</html>