根据鼠标位置创建div并调整其大小，类似鼠标右键单击并拖动

Question

我正在尝试在javascript中创建类似于鼠标右键单击和拖动的内容。单击并按住鼠标右键时，我想创建一个<div>;移动鼠标时，<div>根据鼠标位置改变大小;当鼠标右键释放时，弹出<div>消失和上下文菜单。我希望<div>有颜色，但它是透明的，所以我们可以看透。非常感谢您的帮助

我的代码：

＆＃13;

＆＃13;

$(document).ready(function(){
    // right click event
    $( "#displayWindow" )
        .mouseup(function(e) {
            if(e.button == 2) {		
                showMenu(e);
                return false;
            }
            return true; })
        .mousedown(function(e) {
            if(e.button == 2) {			
                $("#displayWindow").append("<div id='div1'></div>");
                return false;
            }
            return true; });

    $(document).click(function(e) {
        if(e.button == 0)
        {
            $('#menu').fadeOut(80);
        }
    });

    function showMenu(e)
    {
        $('#menu').css('left',e.pageX+5);
        $('#menu').css('top',e.pageY+5);
        $('#menu').fadeIn(100);
    }

    document.getElementById('displayWindow').oncontextmenu = function(){return false;}
}); // end ready

＆＃13;

#displayWindow {
    background-color: white;
    border: 1px solid;
    height: 600px;
    width: 800px;
}
#div1 {
    background-color: lightgreen;
}
#menu {
    position: absolute;
    display: none;
    background-color: white;
    border: 1px solid gray;
    box-shadow: 5px 5px 10px #474747;
    width: 60px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.menuItem {
    padding-left: 5px;
    padding-right: 5px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: default;
}
.menuItem:hover
{
    background-color: #D2D2D2;		
}
.lineBreak
{
    width: 95%;
    height: 1px;
    background-color:black;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2px;
}

＆＃13;

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<div id="displayWindow"></div>
<h1 id="test"></h1><br>
<h1 id="test1"></h1>
<button id="testbtm">test</button>
<button id="testbtm2">test2</button>
<div id="menu">
    <div class="lineBreak"></div>
    <span class="menuItem" id="delete">delete</span>
</div>

＆＃13;

＆＃13;

＆＃13;