3

我正在创建一个表单所见即所得的构建器，但我在使用可调整大小的 jquery 插件时遇到了问题。似乎当我调整页面上任何项目的大小时，缩放会失控。我在这里找到了可拖动的解决方法：Jquery draggable with zoom problem

但我找不到可调整大小的相同解决方法。场景是当我创建一个可调整大小和可拖动的项目时，我放大或缩小该项目似乎漂移到其包含的父项之外。您可以在这里看到： http ://drniermanoptometry.cu.cc/Main/Forms_Module/editForm.php/?name=horizo​​ntal-clickersearch.html 注意：单击分配“否”按钮以创建可调整大小的可拖动项目。然后使用 control++ 缩小

我已将遏制设置为父级并将css位置设置为相对无济于事。

可调整大小还有一些其他问题。当我调整项目大小时，它不允许我将项目一直拖到右侧，并且可拖动在 FF 中不起作用。可能有关系？ 更新： 我发现边距设置为自动存在问题，因此我修复了可调整大小容器的左侧以避免该问题。但我仍然想知道是否有自动保证金的解决方法。这家伙有同样的问题...... 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>
4

0 回答 0