Question

我正在创建一个表单wysiwyg构建器，我遇到了可调整大小的jquery插件的问题。似乎当我调整页面上任何项目的大小时，缩放就会变得非常糟糕。我在这里找到了一个可拖动的解决方法..http：//stackoverflow.com/questions/2930092/jquery-draggable-with-zoom-problem

但我找不到可调整大小的相同解决方法。场景是当我创建一个可调整大小和可拖动的项目，我放大或缩小项目似乎漂移在其包含父项之外。你可以看到这个这里.. http://drniermanoptometry.cu.cc/Main/Forms_Module/editForm.php/?name=horizontal-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>

可调整大小的jquery插件缩放问题

0 个答案: