Develop Reference

Drag and Drop data not being retained in dataTransfer object

I am trying to implement a simple drag and drop, but for some reason the data I'm storing in the dataTransfer object is not being retained. Here is my code:
function drag(ev) {
var checker_id = ev.target.id;
var checker_slot = ev.target.getAttribute('data-slot');
console.log(`Starting drag with ${checker_id} from slot ${checker_slot}`);
ev.originalEvent.dataTransfer.setData("checker-id", ev.target.id);
ev.originalEvent.dataTransfer.setData("checker-slot", ev.target.getAttribute('data-slot'));
var stored_id = ev.originalEvent.dataTransfer.getData("checker-id");
var stored_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
console.log(`Just stored checker ${stored_id} from slot ${stored_slot}`);
}
function drag_over(ev) {
console.log(`Drag_over event data: ${ev.originalEvent.dataTransfer.types}`);
var checker_id = ev.originalEvent.dataTransfer.getData("checker-id");
var checker_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
console.log(`Drag_over with checker ${checker_id} from slot ${checker_slot}`);
}
$("#checker-1").on('dragstart', drag);
$("#slot-2").on('dragover', drag_over);
.slot {
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid black;
}
.checker {
width: 50px;
height: 50px;
background: blue;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<div class="slot" id="slot-1">
<div class="checker" id="checker-1" data-slot="slot-1" draggable="true">
</div>
<div class="slot" id="slot-2"></div>
I would expect the output to the console to be the following:
Starting drag with checker-1 from slot slot-1
Just stored checker checker-1 from slot slot-1
Drag_over event data: checker-id,checker-slot
Drag_over with checker checker-1 from slot slot-1
Instead, the last log statement is:
Drag_over with checker from slot
For some reason, it's retaining the keys I store in the dataTransfer object but not the values. I can't figure out what I'm doing wrong.

I noticed you were missing a DIV close tag. This corrected code appears to work:
function drag(ev) {
var checker_id = ev.target.id;
var checker_slot = ev.target.getAttribute('data-slot');
console.log(`Starting drag with ${checker_id} from slot ${checker_slot}`);
ev.originalEvent.dataTransfer.setData("checker-id", ev.target.id);
ev.originalEvent.dataTransfer.setData("checker-slot", ev.target.getAttribute('data-slot'));
var stored_id = ev.originalEvent.dataTransfer.getData("checker-id");
var stored_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
console.log(`Just stored checker ${stored_id} from slot ${stored_slot}`);
}
function drag_over(ev) {
console.log(`Drag_over event data: ${ev.originalEvent.dataTransfer.types}`);
var checker_id = ev.originalEvent.dataTransfer.getData("checker-id");
var checker_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
console.log(`Drag_over with checker ${checker_id} from slot ${checker_slot}`);
}
$("#checker-1").on('dragstart', drag);
$("#slot-2").on('dragover', drag_over);
.slot {
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid black;
}
.checker {
width: 50px;
height: 50px;
background: blue;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<div class="slot" id="slot-1">
<div class="checker" id="checker-1" data-slot="slot-1" draggable="true">
</div>
</div>
<div class="slot" id="slot-2"></div>
You might also consider the following.
$(function() {
$(".checker").draggable();
$(".slot").droppable({
accept: ".checker",
drop: function(event, ui) {
ui.draggable.appendTo(this).attr("style", "");
console.log("Got " + ui.draggable.attr("id"));
}
});
});
.slot {
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid black;
}
.checker {
width: 50px;
height: 50px;
background: blue;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="slot" id="slot-1">
<div class="checker" id="checker-1" data-slot="slot-1" draggable="true">
</div>
</div>
<div class="slot" id="slot-2"></div>

Fire mouseup event only for outer div

I have an HTML element (form element - textbox) inside another series of divs.
I created listener for mouseup event on the outer div, but it fires when I click on the textbox.
I thought it would only fire when mouseup on the outer div since I attached the listener to that element - not to the textbox
Is there a way to prevent it from firing when 'mouseup' fires on the textbox?
require([
"dijit/form/TextBox",
"dojo/on",
"dojo/dom"
], function (
TextBox,
on,
dom) {
var box = new TextBox({
name: "any",
value: "",
placeholder: "Type anything here"
}, "textBox");
var canvas = dom.byId("outerDiv");
on(canvas, "mouseup", function (e) {
alert();
});
});
dojo.require("dijit.form.anyText");
var textBox = dijit.byId("textBox");
console.log( "--- >> "+textBox.get("value"));
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>
<Div id="outerDiv" style="width: 3in; height: 3in; border: 1px solid;border-color:black; cursor: pointer;">
<Div id="innerDiv" style="height: auto; border: 1px solid;border-color:blue;">
<div id="textBox" readonly></div>
</Div>
</Div>

When you click the text box, the event "bubbles up" to the outer elements.
JavaScript's Event.stopPropagation() "prevents further propagation of the current event in the capturing and bubbling phases".
Below is an example in pure JavaScript, but see also dojo.stopEvent.
var outerDiv = document.getElementById('outerDiv');
var textBox = document.getElementById('textBox');
outerDiv.addEventListener('mouseup', function(event) {
console.log('mouse up on outer div');
});
textBox.addEventListener('mouseup', function(event) {
event.stopPropagation();
console.log('mouse up on text box');
});
#outerDiv {
width: 3in;
height: 3in;
border: 1px solid;
border-color: black;
cursor: pointer;
}
#innerDiv {
height: auto;
border: 1px solid;
border-color: blue;
}
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>
<Div id="outerDiv">
<Div id="innerDiv">
<div id="textBox" readonly>textbox</div>
</Div>
</Div>
Edit
Here's a Dojo example:
require([
"dijit/form/TextBox",
"dojo/on",
"dojo/dom"
], function(
TextBox,
on,
dom) {
var box = new TextBox({
name: "any",
value: "",
placeholder: "Type anything here"
}, "textBox");
var canvas = dom.byId("outerDiv");
on(box, "mouseup", function(e) {
console.log('mouse up on text box');
dojo.stopEvent(e);
});
on(canvas, "mouseup", function(e) {
console.log('mouse up on outer div');
});
});
#outerDiv {
width: 3in;
height: 3in;
border: 1px solid;
border-color: black;
cursor: pointer;
}
#innerDiv {
height: auto;
border: 1px solid;
border-color: blue;
}
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<Div id="outerDiv">
<Div id="innerDiv">
<div id="textBox" readonly>textbox</div>
</Div>
</Div>

You can check the id before creating the alert
on(canvas, "mouseup", function (e) {
if (e.target.id == "outerDiv") {
alert();
}
});
JS Fiddle

Display the dropped image in jquery

I have made the drag and drop image in html.
Now I want to display the dropped image in that upload box.
How do I do it?
$(document).ready(function() {
var obj = $(".drop");
obj.on("dragover", function(e) {
e.stopPropagation();
e.preventDefault();
$(this).css("border", "1px solid lightblue");
});
obj.on("drop", function(e) {
e.stopPropagation();
e.preventDefault();
$(this).css("border", "1px solid lightblue");
$(this).html("");
// Now what to do to display the dropped image..?
});
});
.drop {
border: 2px dotted grey;
padding: 20px;
margin-bottom: 20px;
width: 500px;
height: 200px;
font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="drop">
<label for="fileselect">Files to upload:</label>
<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
<div id="filedrag">or drop files here</div>
</div>

You should use e.originalEvent.dataTransfer
$(document).ready(function() {
var obj = $(".drop");
obj.on("dragover", function(e) {
e.stopPropagation();
e.preventDefault();
$(this).css("border", "1px solid lightblue");
});
obj.on("drop", function(e) {
e.stopPropagation();
e.preventDefault();
$(this).css("border", "1px solid lightblue");
$(this).html("");
// Now what to do to display the dropped image..?
var dt = e.originalEvent.dataTransfer;
var files = dt.files;
if (dt.files.length > 0) {
var file = dt.files[0];
alert(file.name);
}
});
});

change size of div function doesn't work

I have a function that alters the size of a div when I click on it. Now I have to write the onclick command in my html page, but I want it to stand in the extern .js file.
Now in html:
<div id="box1" class="kaesten" onclick="changeSize('box1')"> Title 1 </div>
What I want:
<div id="box1" class="kaesten" > Title 1 </div>
Tried something in jquery but it didn't work:
function changeSize(id) {
var elem = document.getElementById(id);
var currentAbsoluteElem = document.getElementById('dummy');
var text = elem.innerHTML;
currentAbsoluteElem.innerHTML = text;
currentAbsoluteElem.setAttribute('style', 'display:block');
/*Extra styling neeed to be done here*/
}
var elems = document.getElementsByClassName('kaesten');
for (var i = 0; i < elems.length; i++) {
elems[i].onclick = function() {
changeSize(this.id);
}
}
var absoluteCl = document.getElementsByClassName('absoluteclass');
absoluteCl[0].onclick = function() {
console.log(document.getElementsByClassName('absoluteclass'))
document.getElementsByClassName('absoluteclass')[0].setAttribute('style', 'display:none');
}
$(document).ready(function() {
$('.kaesten').click(function() {
changeSize($(this).attr('id'));
});
});
.kaesten {
width: 240px;
height: 300px;
background-color: darkgrey;
background-position: center;
background-repeat: no-repeat;
text-shadow: 0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align: top;
text-shadow: 3px 3px 4px #777;
float: left;
margin-left: 30px;
}
.absoluteclass {
position: absolute;
background-color: darkgrey;
width: 600px;
height: 600px;
left: calc(30%);
display: none;
}
<div id="box1" class="kaesten">title1</div>
<div id="box2" class="kaesten">title2</div>
<div id="box3" class="kaesten">title3</div>
<div id="box4" class="kaesten">title4</div>
<div id="dummy" class="absoluteclass"></div>
I know it works in the fiddle, but I don't know why it doesn't work on my homepage without writing the function in the div's.

I guess the problem is that you are trying to assign the onclick event handler before the DOM is actually rendered and ready. My suggestion is to wrap your "initialization code" inside a $(document).ready() method. As follows:
$(document).ready(function() {
// Apply the on click event handlers here, using jQuery or not
// For instance:
$('.kaesten').click(function() {
changeSize($(this).attr('id'));
});
});

if you want to pass the id from jquery to your function you should do it like this:
$(function(){
$(".kaesten").click(function(){
changeSize($(this).attr("id"));
});
});

you can use .css in jquery
$(function(){
$(".kaesten").click(function(){
$(this).css({'width' : '600px' , 'height' : '600px'});;
});
});

FadeIn and FadeOut effect to toggle boxes

http://codepen.io/anon/pen/Nqbdap
Guys, i made this simple code and there is something wrong with him, and i can't.. i just can't figure out why.
In the first toggle change, the box one will disappear without the fadeOut effect, them will work normally.
Code:
var clickHandler = function(e) {
var target = $(this).data('open');
var box = $('.box');
var active = 'box__active';
if (!(box.eq(target).hasClass(active))) {
box
.fadeOut(500, function() {
box.removeClass(active)
});
box.eq(target)
.delay(500).fadeIn(500, function() {
box.eq(target).addClass(active);
});
}
e.preventDefault();
};
$(document).on('click', '[data-open]', clickHandler);
.box {
width: 50px;
height: 50px;
border: 1px solid black;
display: none;
}
.box__active {
display: inline-block;
}
a {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<a data-open="0">Open one</a><br/>
<a data-open="1">Open two</a><br/>
<a data-open="2">Open three</a><br/>
<br/>
<br/>
<br/>
<div class="box box__one box__active">One</div>
<div class="box">Two</div>
<div class="box">Three</div>

I think you should know that .eq() in jquery start index with 0 not with 1 .. so if I understand well you should use
var target = $(this).data('open') - 1;
and for better code use .parseInt
var target = parseInt($(this).data('open')) - 1;
DEMO HERE
you just need to use $(this)
$(this).removeClass(active);
$(this).addClass(active);
DEMO HERE

I changed your code a bit. Now it is working at first time.
var clickHandler = function(e) {
var target = $(this).data('open');
var box = $('.box');
box.fadeOut(500);
box.eq(target).delay(500).fadeIn(500);
e.preventDefault();
};
$(document).on('click', '[data-open]', clickHandler);
.box {
width: 50px;
height: 50px;
border: 1px solid black;
display: none;
}
a {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<a data-open="0">Open one</a><br/>
<a data-open="1">Open two</a><br/>
<a data-open="2">Open three</a><br/>
<br/>
<br/>
<br/>
<div class="box" style="display:inline-block;">One</div>
<div class="box">Two</div>
<div class="box">Three</div>