Geek asks and answers

How to show custom HTML template while dragging an element?

When we drag an element, we see a ghostly image of the element, and we can change the image using this:

event.dataTransfer.setDragImage(image, xOffset, yOffset);

But in my case, I want to show my own HTML template with some information.

How to do it?

+3
source share
1 answer

you can use jqueryui to achieve this.

see this and try dragging the last field in the first line of the example. 

$( "#draggable3" ).draggable({
      cursor: "move",
      cursorAt: { top: -12, left: -20 },
      helper: function( event ) {
        return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
      }
    });

you can combine, you can combine http://jqueryui.com/draggable/#sortable with the one I gave you. Not so sure, but yes, if you work a little, then you can solve it.

    $( "#draggable3" ).draggable({
          connectToSortable: "#sortable",          
          cursor: "move",
          cursorAt: { top: -12, left: -20 },
          helper: function( event ) {
            return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
          }
        });
0

More articles:


All Articles