Drag and Drop in Circular Div target area

2 posts, 0 answers
  1. prince
    prince avatar
    1 posts
    Member since:
    Nov 2013

    Posted 12 Nov 2013 Link to this post

    Drag from listview and drop in  Circular target area (maybe using SVG etc it can be achieved)
    I tried using CSS circle border-radius:50% but it just shows circle div , but actually its a rectangular div.

    I am searching the solution from several days in your forum and other stackoverflow forums, but couldn't find solution for complete circular div area for drop (Using Drag and Drop)

    Please let me know whether it is possible or not ?
    If you want more detail of my question then I can create a jsfiddle for it.
  2. Dimo
    Dimo avatar
    8471 posts

    Posted 13 Nov 2013 Link to this post

    Hi Prince,

    Drop targets with large rounded corners work as expected on my side - I can drop only inside the area, not on the area, which is just outside the rounded corners. In case the drop target is an element inside the <div> with the rounded corners, then try setting overflow:hidden to that <div>, so that the drop target does not overflow.

    You can experiment with the following demo by increasing the border radius via the browser's DOM inspector:


    If your case is too different and the above information is not relevant, please provide a runnable demo.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top