1

我想实现以下目标：当用户单击图像时，会在 mouse.x 坐标处创建一个选择“div”，并​​且用户可以水平调整该 div 的大小。在“mouseup”上，页面被重定向到另一个页面。到目前为止，这是我的代码：

<html>
<head>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script type="text/javascript">
function myDrag(evt,e)
    {
    var id="sel"+e.id;
    var startX= evt.pageX;
    var mouseX = evt.pageX - e.offsetLeft;
    var mouseY = evt.pageY - e.offsetTop ; 
    var child=document.getElementById(id);
    if(child==null)
        {
        child=document.createElement("div");
        child.id=id;
        child.setAttribute("style","color:white;background-color:red;opacity:0.5;width:5px;height:300px; position:absolute;top:0px;left:"+mouseX+"px;font-size:9pt;");
        e.appendChild(child);
        var constraint=
        $("#"+id).resizable({
             maxHeight: 300,
             minHeight:300,
             minWidth: 1,
             maxWidth: 500,
            containment:"parent"
            });
        }

    }
</script>
</head>
<body>

<div style="margin-top:50px;margin-left:150px;">
<div id="x" onmousedown="javascript:myDrag(event,this)" style="position:relative;">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Old_Man_with_Water_Studies.jpg/500px-Old_Man_with_Water_Studies.jpg" width="500" height="300"/>
</div>
</div>

</body>
</html>

用户单击图像后如何开始调整大小？我试过$("#"+id).trigger("resize");没有成功。

在这里使用draggable.containment的正确方法是什么？

4

1 回答 1

1

这种方法怎么样？需要改进，但有效：

<html>
<head>
  <style type="text/css">
    #container { width:800px; height:600px; border:1px dotted #555; }
    #selector { z-index:100; position:absolute; width:100px; height:200px; border:1px dashed #555; box-shadow: 3px 3px 5px #888888; }
  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
    $(document).ready(function () {
        $(document).data('drag_mode', false);
        $(document).data('x', 0);
        $(document).data('y', 0);
        $(document).data('width', 0);
        $(document).data('height', 0);

        $('#container').on('mousedown', function(e) {
            $(document).data('drag_mode', true);
            $(document).data('x', e.pageX);
            $(document).data('y', e.pageY);
            $('#selector').css('left',e.pageX);
            $('#selector').css('top',e.pageY);
        });

        $('#container').on('mousemove', function(e) {
            if ($(document).data('drag_mode')) {
                $('#selector').css('width', (e.pageX - $(document).data('x')));
                $('#selector').css('height', (e.pageY - $(document).data('y')));
            }
        });

        $('#container').on('mouseup', function(e) {
            $(document).data('drag_mode', false);
        });

    });
  </script>

</head>
<body>

    <div id="container">
        <div id="selector">
        </div>
    </div>


</body>
</html>
于 2012-10-18T17:25:48.717 回答