Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Drag and Drop then Draw Line in JQUERY

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #180078
    Nestle
    Participant

    Hello,
    I want to drag elements from datalist and drop them in a div.
    when you drag an element you must draw a line from it to some point.
    using asp.net and jquery

    #180079
    nixnerd
    Participant

    Why MUST you use asp.net?

    #180080
    Nestle
    Participant

    sorry HTML not asp.net

    #180082
    nixnerd
    Participant

    Ha ha ha. I get them confused all the time myself :)

    jQuery makes it pretty easy to create drag and drop elements. Could you try creating a Codepen so we can help?

    #180083
    Nestle
    Participant

    plz check this:

    http://codepen.io/Nestle/pen/aznyk

    i need that when i drop an element to draw a line from it , and when drop another
    element to automatically connected to the drawn line.

    could you help me?

    #180085
    Nestle
    Participant
    #180086
    nixnerd
    Participant

    Well, first of all, your elements aren’t draggable yet. Let’s forget about the line for now.

    See here:

    http://jqueryui.com/draggable/

    #180088
    Nestle
    Participant
    #180089
    nixnerd
    Participant

    I’m not able to drag the numbers. I assume that’s what’s supposed to be happening.

    #180091
    Nestle
    Participant

    i have tried it on a stand alone application and it works fine.
    may be the jquery library.

    anyway when drop an item how to draw a line from that element
    and automatically connected to seconde dropped element and so on.
    could you help please?

    #180093
    nixnerd
    Participant

    Look into something like this:

    http://stackoverflow.com/questions/4903530/how-to-get-the-position-of-a-draggable-object

    You need to get the position of each element with a function that’s called every time you move anything. But… that’s a shipload of state management. Also… I’m not really sure how you should go about drawing the lines.

    Typically, you’d use canvas for something like this. But… it looks like you’re trying to do some straight up DOM action. I would recommend this:

    http://snapsvg.io/

    In theory, you should be able to pass your coordinates to some function that handles the drawing of these svg lines.

    Godspeed Nestle.

    Hey, is there any way you could make this your Gravatar:

    #180216
    nixnerd
    Participant

    Snap.svg also makes things draggable. It’s pretty damn easy.

    #180272
    Nestle
    Participant

    Thank you so much NIX.
    but i need an example if possible to draw a line between draggable elements.
    i see the library JsPlumb, but i didnt know how to start.

    #180532
    nixnerd
    Participant

    The first thing you need to be able to do is drag something and console.log() the new position. As long as you’re able to somehow return the new position… you should be able to re-draw the line as it moves.

    Now, AFAIK… this is NOT a trivial task. It may or may not work with SVG… I haven’t tried. It could surely work with canvas. But… canvas does have some limitations as far as I’m concerned.

    #203829
    zinuhe
    Participant
Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.