Thread: need help adding drag and drop function with either javascript or jquery

Hello
I'm trying to add a drag and drop event to my js/jquery code in which after my shape is rendered to the canvas I need to move the shape around by selecting it then dragging it into position. I'm not sure if I need to use jquery or just plain old javascript. I've been tinkering around with it but its not working for me. Can somebody give me a hint please?

Code:

function drawCircle(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.arc(100, 75, 25, 0, 2 * Math.PI);
    ctx.stroke();
}

function clearArea() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    return false;
}

function drawEllipse(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.ellipse(100, 100, 50, 80, 90 * Math.PI/180, 0, 2 * Math.PI);
    ctx.stroke();

}

function drawP(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.font = "12px serif";
    ctx.fillText("p", 50, 100);
}

function drawQ(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.font = "12px serif";
    ctx.fillText("q", 50, 100);
}
function OnClickDraw() {
    var drawtype = $('#drawType').val().toLowerCase();
    switch(drawtype) {
        case 'c':
            drawCircle();
            break;
        case 'e':
            drawEllipse();
            break;
        case 'p':
            drawP();
            break;
        case 'q':
            drawQ();
            break;
    }
    return false;
}

As you can see I'm using both js and jquery already

Using a framework for canvas makes things being a bit more complex easier. I recommend jCanvas. Have a look at this:
Draggable Layers | jCanvas Docs

@Sempervivum Thank You for that. One question though, would I have to totally change the javascript I have now or just add the extra jquery at the end of my code?

Objects you intend to drag & drop you will have to draw newly by use of jCanvas layers as drag & drop is supported for these layers only. Other (static?) elements you can keep as they are.