DnD on svg element

I would like to drag an item from a list onto a custom svg item. similar to this: https://snippet.webix.com/nwpofw3r When the list element is dropped over the svg element rect must launch a function with parameters the id of the list element and the id of the svg element .

Any ideas on how to achieve this?
thank you

Tagged:

Comments

  • Hello @lucianotrinca,

    When the list element is dropped over the svg element rect must launch a function with parameters the id of the list element and the id of the svg element .

    Could you please specify the exact functionality that has to be implemented? Considering the provided snippet, it shouldn't be too difficult to get the id of the source item and the id of the target element: https://snippet.webix.com/jn6fy13s.

  • hi Dzmitry. Thanks for the quick and professional response. I try to better explain the project I'm working on. I want to use SVG to represent graphic information. like a page of a brochure or a catalog for example. using a php script I can draw a layout in SVG that I can send in a webix template. as in the example.
    Within this layout in SVG there are graphic elements that represent many containers of information, made with the svg object. I want to relate these containers (rect to svg) with the elements of a list. as in his example. In reality the object only serves to indicate where on the page I should put an element of the list. it only serves to help the user understand where to lay out an element of the list without actually inserting it. it would be enough to change the border color of the rect object to indicate that it has already been associated.
    When I release the list element above a I run a function that calls a script in php. To this script I have to pass the list id and the object id as parameters: id = "name_object".
    The php script associates the two elements and writes this information into a database.
    But now I have another problem. I would like the objects to have different names: id = "name_object_1", id = "name_object_2", etc. And then pass to the script as parameters the name of the object of the list and the new one of . Do you think it is a thing to do?
    thanks again for the great kindness.

  • Look this for sample:

    template:
    "

    ",

  • Hey @lucianotrinca,

    Look this for sample: ...

    Unfortunately, the sample is blank, not sure if this is intentional or not.

    Do you think it is a thing to do?

    My apologies, it is still quite difficult to picture the structure you are talking about. I get that you are trying to associate certain SVG elements on the page with elements within a list, but there are still a few questions.

    But now I have another problem. I would like the objects to have different names:

    As far as I can imagine, every element on the page should have its own id in your case, is that not correct? In the case where every element has an id assigned to it, I don't really see an issue of having different names? For example: https://snippet.webix.com/05gu908u.

  • Hi dzmitry sorry for my mistake and thanks for the help. in the meantime I found a solution similar to the one you tell me. how do I insert the code in the post? thank you very much

    template:

    ,
  • how do I insert the code in the post? thank you very much

    You can use either markup or markdown to format your message appropriately. For example, you can put your code inside of a code block using markdown, which would look like this:

    ~~~
    your code
    ~~~
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!