JavaScript Drag and Drop example 6

29 Responses to JavaScript Drag and Drop example 6

1. dbunic says:

   18.09.2012. at 14:33

   When DIV element is dragged across table(s), REDIPS.drag will highlight TDs which can accept DIV element. So, when DIV element is dragged out of a table then last TD will stay highlighted. This is needed to enable dropping DIV element to the last possible TD if user releases button out of table boundaries (otherwise dropped DIV element will be lost).

   If I understood your question well, currently is not possible to delete DIV element by dropping DIV element out of a table.
2. Adam says:

   18.12.2012. at 11:11

   Hello,
   when drag div to occupied cell, I would like to ask the user what he would like to do.
   Is it possible ?
3. dbunic says:

   18.12.2012. at 12:02

   @Adam - When dropMode is set to "single" then is not possible to drop DIV element to the occupied TD. Instead, you can define dropMode to "multiple" and inside event.droppedBefore(targetCell) event handler write custom JS code. This code will be executed in moment when user releases left mouse button but before dropping DIV element to the target cell. If you return "false" from droppedBefore, then DIV element will be returned to the initial position.

   Input parameter of droppedBefore is target cell reference, so you can test whether cell is empty or not.
4. Adam says:

   18.12.2012. at 16:36

   @dbunic - First thank you very much!! I made what you said, I test whether cell is empty or not, if is not empty, I open a jquery-ui menu and return false. More than that I store the target cell reference in another page (because when droppedBefore return false, and I store the reference in the same page it makes it undefined). How should I make the changes of the DIV in the chosen dropMode?

   thanks
   Adam
5. Adam says:

   18.12.2012. at 16:43

   I've tried to call from the click event on the select mode to the

   rd.event.dropped = function (targetCell)
   

   but it's not working.

   Adam
6. dbunic says:

   19.12.2012. at 13:30

   @Adam - REDIPS.drag is updated to version 5.0.3 (emptyCell method now has option to test target cell and to delete cell content) - this is needed for your case. Here is complete JS code in droppedBefore event handler:

   // event handler invoked before DIV element is dropped to the cell
   rd.event.droppedBefore = function (targetCell) {
       // test if target cell is occupied and set reference to the dragged DIV element
       var empty = rd.emptyCell(targetCell, 'test'),
           obj = rd.obj;
       // if target cell is not empty
       if (!empty) {
           // confirm question should be wrapped in setTimeout because of
           // removeChild and return false below
           setTimeout(function () {
               // ask user if he wants to overwrite TD (cell is already occupied)
               if (confirm('Overwrite content?')) {
                   rd.emptyCell(targetCell);
               }
               // append previously removed DIV to the target cell
               targetCell.appendChild(obj);
           }, 50);
           // remove dragged DIV from from DOM (node still exists in memory)
           obj.parentNode.removeChild(obj);
           // return false (deleted DIV will not be returned to source cell)
           return false;
       }
   };
   

   I also created jsfiddle where you can see demo in live.

   http://jsfiddle.net/bXXE5/2/

   If target cell is not empty, application will ask to confirm whether to overwrite or to append dropped DIV element. This should help you with jQuery popup dialog and possible actions in case of dropping content to non empty cell.
7. Adam says:

   19.12.2012. at 18:57

   @dbunic - Thank you very very much!!!
   the last thing i would like to know is if can I ask the user i what drop position he want to chose - shift, switch or overwrite ?

   I mean I want to do this: If the cell is not empty i will show to the user a menu with 3 drop mode - shift, switch and overwrite and he will have to chose, when he will chose the drop will be fired in the mode the user was chose.

   please let me know if is it possible.

   Thanks!
8. dbunic says:

   20.12.2012. at 08:28

   @Adam - dropMode in general can be set before dragging begins or in the early stage of drag process like event.clicked and event.moved hooks. If you want to set dropMode depending on cell content, then it's needed to use trick like is shown in jsfiddle demo:
   1) dropped DIV element should be temporary removed
   2) content in target cell should be deleted, switched or shifted in event.droppedBefore
   3) and place DIV element from the first step to the TD

   Nevertheless I have prepared example26: jQuery dialog with shift, switch and overwrite actions. So, answer to your question is yes, it's possible

   I also had to make small modifications within enableDrag and relocate methods so please download latest redips2.tar.gz package (version 5.0.4).
9. adam says:

   20.12.2012. at 18:33

   Cooool! thanks very very much!