Search code examples
javascriptjqueryhtmljquery-ui-resizable

Click and select a vertical slice of an image using jquery

I want to achieve the following thing: When the user to click an image, a selection 'div' is created at the mouse.x coordinate and the user can resize this div horizontally. On 'mouseup', the page is redirected to another page. Here is my code so far:

<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>

How can start the resize as soon as the user clicks on the image ? I've tried $("#"+id).trigger("resize"); with no success.

What is the right way to use draggable.containment here ?

Solution

  • How about this approach? Needs refinement, but works:

    <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>