i created a div an want to drag & drop pictures in it... the main problem is, that if it works the image cannot be dragged inside that div.
Code working drag & drop
$('div[role="textbox"]').on(
'dragover',
function (e) {
e.preventDefault();
e.stopPropagation();
}
);
$('div[role="textbox"]').on(
'dragenter',
function (e) {
e.preventDefault();
e.stopPropagation();
}
);
$('div[role="textbox"]').on(
'drop',
function (e) {
});
Code drag & drop not working but drag inside div works
//$('div[role="textbox"]').on(
//'dragover',
//function (e) {
// e.preventDefault();
// e.stopPropagation();
//}
// );
//$('div[role="textbox"]').on(
// 'dragenter',
// function (e) {
// e.preventDefault();
// e.stopPropagation();
// }
//);
$('div[role="textbox"]').on(
'drop',
function (e) {
//logic
})
Is there a way to combine these two to make both work?
The image is simply inserted as an .
This should be an example of what you want to do:
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev){ev.preventDefault()}
function drag(ev){ev.dataTransfer.setData("text", ev.target.id)}
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Source:
http://www.w3schools.com/html/html5_draganddrop.asp
Also from my cross browser experience, to drag/drop nested elements inside a div one needs to cancel all its drag events on the parent div.
element.ondragenter = function(event){event.preventDefault()};
element.ondragleave = function(event){event.preventDefault()};
element.ondragover = function(event){event.preventDefault()};
Related
I just have a problem with drop zone for my photos, dataTransfer doesn't work end return as undefault. Please help me and show where I made a mistake. Thank you.
jQuery(document).ready(function ($) {
$('#dropbox').on("dragenter dragstart dragend dragleave dragover drag drop", function (e) {
e.preventDefault();
});
$('#dropbox').on('drop', function(e){
e.preventDefault();
var files = e.dataTransfer.files;
console.log(files);
if(files.length>1) console.log("noooo!");
else
{
console.log("Drop!");
}
});
});
div {
width:600px;
height:300px;
background:#FFFCCC;
}
<html>
<body>
<div id="dropbox"></div>
</body>
</html>
Since you are using jQuery, the event you have (inside the drop) is not the original event, but a jQuery wrapper.
You can use the e.originalEvent to get the original event, and there you have the dataTransfer.files:
e.originalEvent.dataTransfer.files
Here is a working example:
jQuery(document).ready(function ($) {
$('#dropbox').on("dragenter dragstart dragend dragleave dragover drag drop", function (e) {
e.preventDefault();
});
$('#dropbox').on('drop', function(e){
e.preventDefault();
debugger;
var files = e.originalEvent.dataTransfer.files;
console.log(files);
if(files.length>1) console.log("noooo!");
else
{
console.log("Drop!");
}
});
});
div {
width:600px;
height:300px;
background:#FFFCCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropbox"></div>
I would like to know how to implement a JQuery event listener for an HTML 5 canvas element where a mouse cursor enters the canvas while being clicked.
Keep a flag when mousedown and mouseup, then check this when user hover on the canvas.
var mouseDown = false;
$(document).mousedown(function() {
mouseDown = true;
});
$(document).mouseup(function() {
mouseDown = false;
});
var canvasHover = false;
$('canvas').on('mouseenter', function() {
$('span').html(mouseDown ? 'true' : 'false');
});
canvas {
background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas width="300" height="300"></canvas>
<hr />
mouse is down: <span></span>
You can bind mousedown\mouseup events to documentand mouseenter event on canvas.
I'd suggest to use capturing phase instead (which jQuery doesn't support) to avoid any propagation event stopped in some way.
See an example:
document.addEventListener('mousedown', function(e) {
$(this).data('mouseHold', e.which);
}, true);
document.addEventListener('mouseup', function(e) {
$(this).data('mouseHold', false);
}, true);
$('canvas').on('mouseenter', function() {
if ($(document).data('mouseHold')) {
console.log('holding mouse button ' + $(document).data('mouseHold'));
}
});
canvas {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas></canvas>
I'm using HTML5 drag and drop on a parent container, but I want to disable the drag effect on some of its children, specifically an input so that users can select/edit input content easily.
Example:
https://jsfiddle.net/Luzub54b/
<div class="parent" draggable="true">
<input class="child" type="text" value="22.99"/>
</div>
Safari seems to do this for inputs by default so try it on Chrome or Firefox.
I was looking for something similar and found a possible solution using the mousedown and mouseup events. It's not the most elegant solution but it's the only one that worked consistently for me on both chrome and firefox.
I added some javascript to your fiddle:
Fiddle
;
(function($) {
// DOM Ready
$(function() {
$('input').on('mousedown', function(e) {
e.stopPropagation();
$('div.parent').attr('draggable', false);
});
$(window).on('mouseup', function(e) {
$('div.parent').attr('draggable', true);
});
/**
* Added the dragstart event handler cause
* firefox wouldn't show the effects otherwise
**/
$('div.parent').on({
'dragstart': function(e) {
e.stopPropagation();
var dt = e.originalEvent.dataTransfer;
if (dt) {
dt.effectAllowed = 'move';
dt.setData('text/html', '');
}
}
});
});
}(jQuery));
So far I've got this working so that it has a "basic" image, click image, and change image to "active image, but I don't want it to revert back to the original image when you mouse out if the image has been clicked--I want it to stay on the click image until another image is clicked.
Here is my HTML
<div id="booking_i">
<img id="img" src="/design/zebra/images/booking/1stolik.png">
<img id="img2" src="/design/zebra/images/booking/2stolik.png">
</div>
In js would be something like
onmouseover="image.src='/design/zebra/images/booking/1stolik_aktiv.png'";
onmouseout="image.src='/design/zebra/images/booking/1stolik.png'";
onClick="image.src='/design/zebra/images/booking/1stolik_clicked.png'";
HTML
<div id="booking_i">
<img id="inage1" src="/design/zebra/images/booking/booking.png" />
<img id="img" src="/design/zebra/images/booking/1stolik.png" />
<img id="img2" src="/design/zebra/images/booking/2stolik.png" />
</div>
CSS
#image1 {
position: absolute;
left: 103px;
top: 300px;
}
jQuery
$(document).ready(function () {
$('#img').onMouseOver.attr('src','/design/zebra/images/booking/1stolik_active.png');
$('#img').click(function () {
this.attr('src', '/design/zebra/images/booking/1stolik_clicked.png');
$('#img2').attr('src','/design/zebra/images/booking/2stolik.png');
});
$('#img2').onMouseOver.attr('src','/design/zebra/images/booking/2stolik_active.png');
$('#img2').click(function () {
this.attr('src', '/design/zebra/images/booking/2stolik_clicked.png');
$('#img').attr('src','/design/zebra/images/booking/1stolik.png');
});
});
Why are you not using JQuery?
$(document).ready(function(){
var clicked = false;
$("#img").on({
mouseenter: function (event) {
if(clicked)
return false;
$(this).attr('src','new.jpg');
},
mouseleave: function (event) {
if(clicked)
return false;
$(this).attr('src','new.jpg');
},
click: function (event) {
clicked = true;
$(this).attr('src','new.jpg');
}
},
"body"
);
});
You can add class to the image once its been clicked and in the mouseover function test if this image has that class.
In case the class is not there continue, else preventDefault.
some thing like
$('.image').mouseover(function(){
if(!$(this).hasClass('clicked')){
// code to change source here
}
});
in the click event use
$('.image').click(function(){
// to avoid repition
if(!$(this).hasClass('clicked')){
$(this).addClass('clicked');
// code to change the source
}
});
Thats it
are you using jquery? then you can do this
$('#img').on('click', function () {
//click event goes here
$(this).attr("src", "/design/zebra/images/booking/1stolik_aktiv.png");
});
$('#img').hover(
function () {
//hover event
$(this).attr("src", "/design/zebra/images/booking/1stolik.png");
},
function () {
//hover out event
$(this).attr("src", "/design/zebra/images/booking/1stolik_clicked.png");
});
In drag and drop the dragLeave event sometimes fires before the drop event.
This is causing problems because the target is getting the listeners in dragEnter with dragLeave and drop removing the listeners. If dragLeave fires before drop, then there is no listener for the drop.
I think the reason has something to do with another contra-intuitive: the dragEnter sometimes fires multiple times for the same target, even with propagation off. With multiple dragEnters, one would spawn a drop while the others would spawn a dragLeave. If this is the case, perhaps I could associate the dragLeave with the dragEnter - but I see no means of that coordination.
function dragEnter( e ) {
e.stopPropatation();
// is multiple fires of dragEnter for same cell
if( curCell == this ) return;
curCell = this;
curCell.addEventListener( 'drop', drop, true );
curCell.addEventListener( 'dragover', dragOver, true );
curCell.addEventListener( 'dragleave', dragLeave, true );
...
}
function dragLeave( e ) {
e.stopPropagation();
curCell.removeEventListener( 'drop', drop, true );
curCell.removeEventListener( 'dragover', dragOver, true );
curCell.removeEventListener( 'dragleave', dragLeave, true );
}
function drop( e ) {
// do the actual work
dragLeave( e );
}
Here's a list of calls:
begin drag dragstart
drag enter: this=e9 - e.target=IMG
drag enter: this=e9 - e.target=TD
drag enter: this=e8 - e.target=TD
drag enter: this=e8 - adding listeners
drag enter: this=e8 - e.target=IMG
drag leave: this=e8
clearing listeners: this=e8
If the "clearing listeners" were not performed, the next step would have been:
drop: this=e8
try this
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag it</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
There's rarely a reason to manage your event listeners in this way.
If you bind to drop, dragover, dragleave at the same time as you bind to dragenter do you still see the problem?
The HTML dnd api is a little bit weird when you first look at it. Depending on what you are trying to do something simple like
onDragOver=function(e) { e.stopPropagation() }
onDrop=function(e) { /* handle drop */ }
may be all the listeners you need.