jquery?? help!!!

[LaughingKor]

Anyone knows of any format / codes which i can follow to achieve this? must drag and match the lines from the left box to the right box


example:

thanks!!

 

[davidktw]

Anyone knows of any format / codes which i can follow to achieve this? must drag and match the lines from the left box to the right box


example:

thanks!!

No codes, go figure out. My hints for you

1) Modern solution - try SVG for line drawing capability. You can have a SVG element on top of your image.
2) Use javascript, react to onmousedown store the starting coordinates and toggle into a dragging mode, onmousemove event, if the mode is dragging, keep getting the latest mouse coordinates and manipulate the LINE element in SVG to match the start and current coordinates. This way your SVG line will seems to be moving with your mouse. Once onmouseup event is detected, toggle into non-dragging mode and draw the line again from start to end.
3) Now (2) doesn't snap to your dots, if you want snapping, while dragging, you need to compare for all possible endpoints, see if the current mouse coordinates is nearby to any end-points. If so, you adjust the line points to match the nearest endpoint, else follow the mouse coordinates. That will give a snapping effect.

 

[LaughingKor]

No codes, go figure out. My hints for you

1) Modern solution - try SVG for line drawing capability. You can have a SVG element on top of your image.
2) Use javascript, react to onmousedown store the starting coordinates and toggle into a dragging mode, onmousemove event, if the mode is dragging, keep getting the latest mouse coordinates and manipulate the LINE element in SVG to match the start and current coordinates. This way your SVG line will seems to be moving with your mouse. Once onmouseup event is detected, toggle into non-dragging mode and draw the line again from start to end.
3) Now (2) doesn't snap to your dots, if you want snapping, while dragging, you need to compare for all possible endpoints, see if the current mouse coordinates is nearby to any end-points. If so, you adjust the line points to match the nearest endpoint, else follow the mouse coordinates. That will give a snapping effect.

right now i only managed to come up with this, dragging the left column to the right box and only the correct answer will be accepted otherwise it'll revert back.

thanks, will check out the onmousedown, have totally no idea what it is

 

[ykgoh]

right now i only managed to come up with this, dragging the left column to the right box and only the correct answer will be accepted otherwise it'll revert back.

thanks, will check out the onmousedown, have totally no idea what it is

It's an event lah. Layman term means when u press your left mouse button down.

When u release the mouse button n let it spring back, that is a mouse up.

A complete mouse button click consists of mouse down and mouse up: press n release.

 

[LaughingKor]

No codes, go figure out. My hints for you

1) Modern solution - try SVG for line drawing capability. You can have a SVG element on top of your image.
2) Use javascript, react to onmousedown store the starting coordinates and toggle into a dragging mode, onmousemove event, if the mode is dragging, keep getting the latest mouse coordinates and manipulate the LINE element in SVG to match the start and current coordinates. This way your SVG line will seems to be moving with your mouse. Once onmouseup event is detected, toggle into non-dragging mode and draw the line again from start to end.
3) Now (2) doesn't snap to your dots, if you want snapping, while dragging, you need to compare for all possible endpoints, see if the current mouse coordinates is nearby to any end-points. If so, you adjust the line points to match the nearest endpoint, else follow the mouse coordinates. That will give a snapping effect.

are there any sites you can point me to as i totally no clue on how to go about implementing the svg...

right now i can only do a basic HTML canvas draw a fixed line, and after i drag the left box to the right if it's correct then the line appears....

but what i want is dragging the line from point a (left) to point b (right)

thanks man!

 

[davidktw]

right now i only managed to come up with this, dragging the left column to the right box and only the correct answer will be accepted otherwise it'll revert back.

thanks, will check out the onmousedown, have totally no idea what it is

This is as far as I will go getting you started. https://jsfiddle.net/bn8e05w1/2/

Go and figure out the rest.

 

[LaughingKor]

This is as far as I will go getting you started. https://jsfiddle.net/bn8e05w1/2/

Go and figure out the rest.

thanks a lot man

 

[LaughingKor]

Hi, i know this sounds stupid but does anyone know how to include stuff inside the box?

like my content whether i put it in the body or head it will be out of the box of the draggble line

thanks!

 

[davidktw]

Hi, i know this sounds stupid but does anyone know how to include stuff inside the box?

like my content whether i put it in the body or head it will be out of the box of the draggble line

thanks!

Body is where you want to put your contents. Head is for scripts and meta and some other non-displaying contents.

You will want to understand collision detection. It is to say, how you determine if something collided with another. I guess for your case, it's simple checking of the X,Y boundaries of the target object with a single point (endpoint of a line). Surely you don't need me to show you simple mathematics like this right ?

 

[LaughingKor]

Body is where you want to put your contents. Head is for scripts and meta and some other non-displaying contents.

You will want to understand collision detection. It is to say, how you determine if something collided with another. I guess for your case, it's simple checking of the X,Y boundaries of the target object with a single point (endpoint of a line). Surely you don't need me to show you simple mathematics like this right ?

i've managed to put the content inside by using the <foreignobject> tag.

could you give any clue as to how to draw a second line and let the first one stay?

  <script type='text/javascript'>//<![CDATA[
$(function(){
$("#myspace").data("draw_mode", false);

var draw = function(e) {
	console.debug("draw (" + e.pageX + "," + e.pageY + ")");
    var draw_start = $("#myspace").data("draw_start");
    var myline = $("#myline")[0];
    myline.setAttribute("x1", draw_start.x);
    myline.setAttribute("y1", draw_start.y);
    myline.setAttribute("x2", e.pageX);
    myline.setAttribute("y2", e.pageY);
};

var penup = function(e) {
    $("#myspace").data("draw_mode", false);
    console.debug("pen up = " + $("#myspace").data("draw_mode"));
    $("#myspace").off("mousemove", draw);
};

var pendown = function(e) {
    $("#myspace").data("draw_mode", true);
    console.debug("pen down = " + $("#myspace").data("draw_mode"));
    $("#myspace").data("draw_start", { "x" : e.pageX, "y" : e.pageY });
    $("#myspace").on("mousemove", draw);
};



$("#myspace").on("mouseup", penup);
//$("#myspace").on("mouseleave", penup);
$("#myspace").on("mousedown", pendown);
});//]]> 

</script>

 

[davidktw]

i've managed to put the content inside by using the <foreignobject> tag.

could you give any clue as to how to draw a second line and let the first one stay?

Spoiler

  <script type='text/javascript'>//<![CDATA[
$(function(){
$("#myspace").data("draw_mode", false);

var draw = function(e) {
	console.debug("draw (" + e.pageX + "," + e.pageY + ")");
    var draw_start = $("#myspace").data("draw_start");
    var myline = $("#myline")[0];
    myline.setAttribute("x1", draw_start.x);
    myline.setAttribute("y1", draw_start.y);
    myline.setAttribute("x2", e.pageX);
    myline.setAttribute("y2", e.pageY);
};

var penup = function(e) {
    $("#myspace").data("draw_mode", false);
    console.debug("pen up = " + $("#myspace").data("draw_mode"));
    $("#myspace").off("mousemove", draw);
};

var pendown = function(e) {
    $("#myspace").data("draw_mode", true);
    console.debug("pen down = " + $("#myspace").data("draw_mode"));
    $("#myspace").data("draw_start", { "x" : e.pageX, "y" : e.pageY });
    $("#myspace").on("mousemove", draw);
};



$("#myspace").on("mouseup", penup);
//$("#myspace").on("mouseleave", penup);
$("#myspace").on("mousedown", pendown);
});//]]> 

</script>

Spoiler

Spoiler

http://www.inkfood.com/collision-detection-with-svg/

Create a new line in SVG programmatically and manipulate the coordinates. Create a new line on mousedown

 

[LaughingKor]

http://www.inkfood.com/collision-detection-with-svg/

Create a new line in SVG programmatically and manipulate the coordinates. Create a new line on mousedown

ok, i've tried another method of doing the draw multiple lines and it works. However, i cant seem to put html tags like <table></table> inside the svg container.

i only managed to .append html which are words, but when i put a table tag inside it gives me error. any idea how to append images and tables inside? thanks!

the one in bold is what i added, and the words asdf are inside the container where i can draw lines.

when i try to add images or tables it gives me error..

image coming soon

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  
  <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
  
  
  
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
    svg {
    border: 1px solid grey;
}

line {
    stroke: steelblue;
    stroke-width: 2px;
    stroke-linecap: round;
}
  </style>
  



<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var line;

var vis = d3.select("body").append("svg") 
    .attr("width", 600)
    .attr("height", 400)
    .on("mousedown", mousedown)
    .on("mouseup", mouseup);

[SIZE="5"][B]vis.append("foreignObject")
	.append("xhtml:body")
		.html("asdf")[/B][/SIZE]
	
	
function mousedown() {
    var m = d3.mouse(this);
    line = vis.append("line")
        .attr("x1", m[0])
        .attr("y1", m[1])
        .attr("x2", m[0])
        .attr("y2", m[1]);
    
    vis.on("mousemove", mousemove);
}

function mousemove() {
    var m = d3.mouse(this);
    line.attr("x2", m[0])
        .attr("y2", m[1]);
}

function mouseup() {
    vis.on("mousemove", null);
}
}//]]> 

</script>


</head>
<body>
  
  
  
  
  
</body>

</html>

 

[davidktw]

ok, i've tried another method of doing the draw multiple lines and it works. However, i cant seem to put html tags like <table></table> inside the svg container.

i only managed to .append html which are words, but when i put a table tag inside it gives me error. any idea how to append images and tables inside? thanks!

the one in bold is what i added, and the words asdf are inside the container where i can draw lines.

when i try to add images or tables it gives me error..

image coming soon

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  
  <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
  
  
  
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
    svg {
    border: 1px solid grey;
}

line {
    stroke: steelblue;
    stroke-width: 2px;
    stroke-linecap: round;
}
  </style>
  



<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var line;

var vis = d3.select("body").append("svg") 
    .attr("width", 600)
    .attr("height", 400)
    .on("mousedown", mousedown)
    .on("mouseup", mouseup);

[SIZE="5"][B]vis.append("foreignObject")
	.append("xhtml:body")
		.html("asdf")[/B][/SIZE]
	
	
function mousedown() {
    var m = d3.mouse(this);
    line = vis.append("line")
        .attr("x1", m[0])
        .attr("y1", m[1])
        .attr("x2", m[0])
        .attr("y2", m[1]);
    
    vis.on("mousemove", mousemove);
}

function mousemove() {
    var m = d3.mouse(this);
    line.attr("x2", m[0])
        .attr("y2", m[1]);
}

function mouseup() {
    vis.on("mousemove", null);
}
}//]]> 

</script>


</head>
<body>
  
  
  
  
  
</body>

</html>

You know, you are not thinking 3 dimensional. Why must you have all your background images inside the SVG ?

Can't you create an SVG that overlays an existing HTML element ? You can have images behind it. Then place invisible placeholders polygons in the SVG that react to events like if you put a point in it, it reacts.

Of course, how flexible is this method will depends on what you want to achieve.

 

[LaughingKor]

You know, you are not thinking 3 dimensional. Why must you have all your background images inside the SVG ?

Can't you create an SVG that overlays an existing HTML element ? You can have images behind it. Then place invisible placeholders polygons in the SVG that react to events like if you put a point in it, it reacts.

Of course, how flexible is this method will depends on what you want to achieve.

meaning to say this would be a better choice?

and the svg tags in the body of the existing html.

cos i couldn't figure out how to draw another line while the existing drawn line stays... i've tried creating another line but it doesn't seem to work...

<script type='text/javascript'>//<![CDATA[
$(function(){
$("#myspace").data("draw_mode", false);

var draw = function(e) {
	console.debug("draw (" + e.pageX + "," + e.pageY + ")");
    var draw_start = $("#myspace").data("draw_start");
    var myline = $("#myline")[0];
    myline.setAttribute("x1", draw_start.x);
    myline.setAttribute("y1", draw_start.y);
    myline.setAttribute("x2", e.pageX);
    myline.setAttribute("y2", e.pageY);
};

var penup = function(e) {
    $("#myspace").data("draw_mode", false);
    console.debug("pen up = " + $("#myspace").data("draw_mode"));
    $("#myspace").off("mousemove", draw);
};

var pendown = function(e) {
    $("#myspace").data("draw_mode", true);
    console.debug("pen down = " + $("#myspace").data("draw_mode"));
    $("#myspace").data("draw_start", { "x" : e.pageX, "y" : e.pageY });
    $("#myspace").on("mousemove", draw);
};



$("#myspace").on("mouseup", penup);
//$("#myspace").on("mouseleave", penup);
$("#myspace").on("mousedown", pendown);
});//]]> 

</script>

 

[davidktw]

https://jsfiddle.net/bn8e05w1/5/

 

[LaughingKor]

https://jsfiddle.net/bn8e05w1/5/

thanks! from the previous code i already managed to get this, just that i wasn't able to create multiple lines, everytime i drag again the previous line will be missing that's why i tried another method.

really appreciate your help man!

 

[davidktw]

thanks! from the previous code i already managed to get this, just that i wasn't able to create multiple lines, everytime i drag again the previous line will be missing that's why i tried another method.

really appreciate your help man!

These are all patchy codes. Please for your own sake, read them and understand them and use it in your own ways.

https://jsfiddle.net/bn8e05w1/7/

 

[LaughingKor]

http://www.inkfood.com/collision-detection-with-svg/

Create a new line in SVG programmatically and manipulate the coordinates. Create a new line on mousedown

i tried creating new variables for myline for a second line but it doesn't seem to work

 

[davidktw]

i tried creating new variables for myline for a second line but it doesn't seem to work

See one of the way I did it in my latest jsfiddle

 

[LaughingKor]

See one of the way I did it in my latest jsfiddle

ahh... so to say for every pen down, it calls the create line function?

thanks man!

i have another question,i have another script right after the line one, which is this.

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
  $(function () {
      
      $(".boxes").draggable(
          {revert: 'invalid',
           stop: function(){
            $(this).draggable('option','revert','invalid');
          }
         }
      );
      
     
	  $("#droppable").droppable({
          drop: function (event, ui) {
            var draggable = ui.draggable;
           [SIZE="5"][B]if(draggable.attr("value")==1)
                alert("correct!");
              else
                draggable.draggable('option','revert',true);
           }[/B][/SIZE]

i want to make it so that at the else in bold, the line created is gone. So only if the draggable value is equal to (in this case) 1, then the line stays.

how do i remove the specific line i want here?

i guess i'll have to insert some codes right after " else
draggable.draggable('option','revert',true)", then remove line right? is it possible?