Using REDIPS awesome drag and drop library I've been trying to work out why the droppedBefore event doesn't fire.
I've cut down bare bones example and uploaded the files here for an easy repro: http://tempsend.com/8B0DF444D3 and here is a live snippet to show you the issue quickly.
"use strict";
// define redips_init variable
var redips = {}, // redips container
rd = REDIPS.drag, // reference to the REDIPS.drag library
msg;
// redips initialization
redips.init = function () {
msg = document.getElementById('message');
// how to display disabled elements
rd.style.borderDisabled = 'solid'; // border style for disabled element will not be changed (default is dotted)
rd.style.opacityDisabled = 60; // disabled elements will have opacity effect
// initialization
rd.init();
// only "smile" can be placed to the marked cell
//rd.mark.exception.d8 = 'smile';
// shift DIV elements with animation
rd.shift.animation = true;
// disabled elements will have opacity effect
rd.style.opacityDisabled = 50;
// set hover color
rd.hover.colorTd = '#9BB3DA';
// prepare handlers
rd.event.cloned = function () {
// display message
var pos = rd.getPosition();
msg.innerHTML += ' FROM ' + pos[1] + ' ' + pos[2] + '<br>'
};
rd.event.droppedBefore = function (targetCell) {
alert('THIS EVENT FIRED YAY@!!!!'); //<-- SHOW THIS TO WIN THE PRIZE!
};
rd.event.deleted = function (cloned) {
// if cloned element is directly moved to the trash
if (cloned) {
var pos = rd.getPosition();
msg.innerHTML += ' TO ' + pos[1] + ' ' + pos[2] + '<br>';
}
else {
msg.innerHTML += 'Deleted';
}
};
};
// add onload event listener
if (window.addEventListener) {
window.addEventListener('load', redips.init, false);
}
else if (window.attachEvent) {
window.attachEvent('onload', redips.init);
}/*
Darko Bunic
http://www.redips.net/
Jun, 2011.
*/
body {
font-family: arial;
margin: 0px; /* for IE6 / IE7 */
}
/* add bottom margin between tables */
#table1,
#table2 {
margin-bottom: 20px;
}
/* drag container */
#redips-drag {
margin: auto;
width: 680px;
}
/* set border for images inside DRAG region - exclude image margin inheritance */
/* my WordPress theme had some funny margin settings */
#redips-drag img {
margin: 1px;
}
/* drag objects (DIV inside table cells) */
.redips-drag {
cursor: move;
margin: auto;
margin-bottom: 1px;
margin-top: 1px;
z-index: 10;
background-color: white;
text-align: center;
font-size: 10pt; /* needed for cloned object */
width: 140px;
height: 150px; /* objects height */
line-height: 20px;
/* round corners */
border-radius: 4px; /* Opera, Chrome */
-moz-border-radius: 4px; /* FF */
}
/* drag objects border for the first table */
.t1 {
border: 2px solid #499B33;
}
/* drag object border for the second table */
.t2 {
border: 2px solid SteelBlue;
}
/* cloned objects - third table */
.t3 {
border: 2px solid #FF8A58;
}
/* allow / deny access to cells marked with 'mark' class name */
.redips-mark {
color: white;
background-color: #9B9EA2;
}
/* trash cell */
.redips-trash {
color: white;
background-color: #e0e0e0;
}
.icontext {
color: black;
}
/* tables */
div#redips-drag table {
background-color: #e0e0e0;
border-collapse: collapse;
}
/* input elements in dragging container */
div#redips-drag input {
cursor: auto;
}
/* height for input text in DIV element */
div#drag #d13 input {
height: 13px;
}
/* height for dropdown menu in DIV element */
div#drag #d5 select {
height: 20px;
}
/* table cells */
div#redips-drag td {
height: 32px;
border: 1px solid white;
text-align: center;
font-size: 10pt;
padding: 2px;
}
/* "Click" button */
.button {
margin-bottom: 2px;
background-color: #6A93D4;
color: white;
border-width: 1px;
width: 44px;
padding: 0px;
}
/* toggle checkboxes at the bottom */
.checkbox {
margin-left: 13px;
margin-right: 14px;
width: 13px; /* needed for IE ?! */
}
/* message cell */
.message_line {
padding-left: 10px;
margin-bottom: 3px;
font-size: 10pt;
color: #888;
}<!DOCTYPE html>
<html><head>
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, user-scalable=no"><!-- "position: fixed" fix for Android 2.2+ -->
<link rel="stylesheet" href="./dragDrop_files/12112015.css" type="text/css" media="screen">
<script type="text/javascript" src="http://www.redips.net/my/preview/REDIPS_drag/redips-drag-min.js"></script>
<script type="text/javascript" src="./dragDrop_files/script.js"></script>
<title>Droppable Event</title>
</head>
<body>
<div style="background-color:#eee;padding:10px;text-align:center;font-size:20px;font-weight:bold">A</div>
<br>
<div id="redips-drag">
<!-- tables inside this DIV could have draggable content -->
<div style="background-color:#eee;padding:10px;text-align:center;font-size:20px;font-weight:bold"><a href="">Drop Before Event Not Working</a></div>
<table id="FSU4">
<colgroup><col width="160"><col width="160"><col width="160"><col width="40"><col width="160"></colgroup>
<tbody><tr height="150px" style="background-color: #eee">
<td class="redips-trash" title="adsf"><div id="34563463" class="redips-drag t3 redips-clone" style="border-style: solid; cursor: move;"><a href="http://abc.com.au" title="abc">sdafsfd</a><BR></div></td>
<td class="redips-trash" title="ertrt"><div id="2765657" class="redips-drag t3 redips-clone" style="border-style: solid; cursor: move;"><a href="http://abc.com.au" title="abc">fghdfghH</a></div></td>
<td class="redips-trash" title="erter"><div id="3456347" class="redips-drag t3 redips-clone" style="border-style: solid; cursor: move;"><a href="http://abc.com.au" title="abc">ljkljhsdf</a></div></td>
<td class="redips-mark"></td>
<td class="redips-mark"></td>
</tr>
<tr height="150px">
<td class="redips-mark"></td>
<td class="redips-mark"></td>
<td class="redips-mark"></td>
<td class="redips-mark"></td>
<td class="redips-mark"></td>
</tr>
</tbody></table>
<div id="message" > </div>
<div><input type="button" value="Save1" class="button" onclick="save('plain')" title="Send content to the server (it will only show accepted parameters)"><span class="message_line">Save content of the first table (plain query string)</span></div>
<div><input type="button" value="Save2" class="button" onclick="save('json')" title="Send content to the server (it will only show accepted parameters)"><span class="message_line">Save content of the first table (JSON format)</span></div>
<div><input type="radio" name="drop_option" class="checkbox" onclick="setMode(this)" value="multiple" title="Enabled dropping to already taken table cells" checked="true"><span class="message_line">Enable dropping to already taken table cells</span></div>
<div><input type="radio" name="drop_option" class="checkbox" onclick="setMode(this)" value="single" title="Disabled dropping to already taken table cells"><span class="message_line">Disable dropping to already taken table cells</span></div>
<div><input type="radio" name="drop_option" class="checkbox" onclick="setMode(this)" value="switch" title="Switch content"><span class="message_line">Switch content</span></div>
<div><input type="radio" name="drop_option" class="checkbox" onclick="setMode(this)" value="switching" title="Switching content continuously"><span class="message_line">Switching content continuously</span></div>
<div><input type="radio" name="drop_option" class="checkbox" onclick="setMode(this)" value="overwrite" title="Overwrite content"><span class="message_line">Overwrite content</span></div>
<div><input type="checkbox" class="checkbox" onclick="toggleDeleteCloned(this)" title="Remove cloned object if dragged outside of any table" checked="true"><span class="message_line">Remove cloned element if dragged outside of any table</span></div>
<div><input type="checkbox" class="checkbox" onclick="toggleConfirm(this)" title="Confirm delete"><span class="message_line">Confirm delete</span></div>
<div><input type="checkbox" class="checkbox" onclick="toggleDragging(this)" title="Enable dragging" checked="true"><span class="message_line">Enable dragging</span></div>
<div id="redips_clone" style="height: 1px; width: 1px;"></div></div>
</body></html>To see the problem Run Code Snippet and drag a box onto another box, an alert should be shown saying: THIS EVENT FIRED YAY@!!!!
I've taken the above code from http://www.redips.net/my/preview/REDIPS_drag/example26/ which has a working rd.event.droppedBefore event. I've compared my cut down repro with the example 10 times over and still can't determine why the event isn't being fired? The other 2 events rd.event.cloned and rd.event.deleted both work.
it does not work because of this code,
Original Code:
<tr height="150px" style="background-color: #eee">
<td class="redips-trash" title="adsf"><div id="34563463" class="redips-drag t3 redips-clone" style="border-style: solid; cursor: move;"><a href="http://abc.com.au" title="abc">sdafsfd</a><BR></div></td>
<td class="redips-trash" title="ertrt"><div id="2765657" class="redips-drag t3 redips-clone" style="border-style: solid; cursor: move;"><a href="http://abc.com.au" title="abc">fghdfghH</a></div></td>
<td class="redips-trash" title="erter"><div id="3456347" class="redips-drag t3 redips-clone" style="border-style: solid; cursor: move;"><a href="http://abc.com.au" title="abc">ljkljhsdf</a></div></td>
<td class="redips-mark"></td>
<td class="redips-mark"></td>
Fixed Code:
<tr height="150px" style="background-color: #eee">
<td title="adsf"><div id="34563463" class="redips-drag t3 redips-clone" style="border-style: solid; cursor: move;"><a href="http://abc.com.au" title="abc">sdafsfd</a><BR></div></td>
<td title="ertrt"><div id="2765657" class="redips-drag t3 redips-clone" style="border-style: solid; cursor: move;"><a href="http://abc.com.au" title="abc">fghdfghH</a></div></td>
<td title="erter"><div id="3456347" class="redips-drag t3 redips-clone" style="border-style: solid; cursor: move;"><a href="http://abc.com.au" title="abc">ljkljhsdf</a></div></td>
<td class="redips-mark"></td>
<td class="redips-mark"></td>
The Reason is simple either you put class="redips-drag orange redips-clone" or class="redips-trash" dont give both to an element. You gave td redips-trash and inside gave div redips-drag thats a confusion i think. As per example link i found that buggy. if you want to make it sure it doesn't make duplicates then remove redips-clone.