JQuery drag and drop div with images and text

I am using the jQuery tableDnD plugin to make a drag list from a table displaying a list of images for the user to reorder. The plugin uses the identifier in the formatting table tag to reorder the cells.

When I drag, just clicking on the spot inside the table cell with no images / content, it works fine. However, when I click on an image (or inside a div containing text) while dragging a table cell and trying to drag + drop, the text / image is selected and the reordered script does not start. Not blocking select function with css or javascript - any idea?

Example tableDnD code: http://tablednd.googlecode.com/svn-history/r12/trunk/index.html

Example rows from a table:

<table id='imagetable'><tr id='1'><td><img src='images/6/PICT0001.JPG' width='100' class='uploadedThumb'><div class='imgInfo' onselectstart='return false;' ondragstart='return false;'>images/6/PICT0001.JPG<br><a href='admin.php?do=deleteImg&id=6&img=images%2F6%2FPICT0001.JPG' style='font-size: 9px;'>[Delete Image]</a></div><input type='text' name='6' value='' size=2 DISABLED></td> </tr><tr id='2'><td><img src='images/6/PICT0006.JPG' width='100' class='uploadedThumb'><div class='imgInfo' onselectstart='return false;' ondragstart='return false;'>images/6/PICT0006.JPG<br><a href='admin.php?do=deleteImg&id=6&img=images%2F6%2FPICT0006.JPG' style='font-size: 9px;'>[Delete Image]</a></div><input type='text' name='6' value='' size=2 DISABLED></td> </tr> 
+1
source share
1 answer

Do not use jQuery to use dom-drag it much better and more functionally.

Add this code:

 <script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex11/domdrag/dom-drag.js"></script> <script type="text/javascript"> Drag.init(document.getElementById("exampleid")); //sets the id to look for to make object draggable </script> 

Sorry, I misunderstood the question :(

0
source

Source: https://habr.com/ru/post/1236774/


All Articles