Question

I would like to create a small DIV about width=200px and height=100px and make it somewhat transparent.

The DIV needs to be over a picture. I would like the client to be able to drag around the DIV anywhere on the screen.

On initial page load, I need to the DIV to be placed in the same fixed position to start.

Does anyone have any jquery scripts that will do this?

thanks you.

Erik

Answer 1

This is quirky, but may give you a simple start. Hopefully others can pitch in! 🙂

JSFiddle http://jsfiddle.net/V3TQ9/

CSS (I didn’t add the transparency)

<style type="text/css">

    #moveit {
    width:200px;
    height:50px;
    position:absolute;
    left:0px;
    top:0px;
    z-index:100;
    background-color:#666666;
    display:block;
}

</style>

HTML

<div id="moveit"></div>

JQuery

<script type="text/javascript">

$('#moveit').mouseup(function(e){ 

        $('#moveit').css({ left : (e.pageX - 100) , top : (e.pageY - 25) });
        $('#moveit').off('mousemove');

}).mousedown(function(){  

        $('#moveit').on('mousemove', function(e){       
            $('#moveit').css({ left : (e.pageX - 100) , top : (e.pageY - 25) });
        });

});

</script>