Javascript ondrag, ondragstart, ondragend - javascript

I've been trying to use ondrag() and some other functions on a div rendered dynamically on an HTML page.
None of these events seem to fire, nor do I get any errors. I can't find much helpful documentation on it either. Am I interpreting it wrongly, can you use these events to script functionality to drag a div around the screen?

Have a look at this documentation: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
Note: It does not work in every browser.
If you want a cross-browser support use jQuery: http://jqueryui.com/demos/draggable/
jQuery example:
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<script>
$(function() {
$( "#draggable" ).draggable({
drag: function(event, ui) {}
});
});
</script>
Another example:
<div id="toBeDragged" draggable="true">
This text <strong>may</strong> be dragged.
</div>
<script>
document.getElementById('toBeDragged').addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', 'This text may be dragged');
});
</script>

I haven't used drag myself much but I believe it's the drag "edit action" - eg selecting text and dragging it within a textbox/textarea.
You may need to implement your own onmousedown() onmouseup() and onmousemove() handlers for the functionality I think you're after

Short answer: <div>-s are not draggable by default, unlike <a>-s. You must add draggable=true:
<div draggable=true ondragstart=...>HTML</div>
Works on Firefox 75 like that.

Is there content in the div? I don't think it's the element itself that gets dragged in this particular event.

An easy way to do this is with jQuery UI, make sure you use it after your dynamic div has been rendered.
$(document).ready(function () {
$('.my_draggable_elements').draggable({
drag: function(){
// do something
}
});
});

Related

Jquery fadeOut with this selector

I am trying to make an element disappear when clicked, the elements are dynamic.
$("#toast-container").on("click", "div.toast", function() {
$(this).fadeOut("fast", function() {
$(this).remove();
});
});
I have tried the code with just $(this).remove() and it works but using fadeOut it doesn't. I have no idea why and it looks absolutely fine to me
I have a easy solution.
HTML
<div id="toast-container">
<div class="toast">
Click Me
</div>
</div>
jQuery
$("div.toast").click(function(){
$(this).parent("#toast-container").fadeOut('slow');
// run your another event.
})
Check my live demo on jsfiddle
well when adding elements dynamically to DOM tree i think your events may register at creation of the page but when you add an element dynamically you should use another jquery function which is called delegate
see the documentation
What is this?
"div.toast"
If your div class is "toast", it should just be ".toast" (it will work with the div.toad, but syntactically, this is not really correct.
That said, your function works fine when I drop it in a fiddle. Are you certain that you are not getting any console errors perhaps related to another feature/function? Check your console.

Why does jQuery selectable break this click function?

I have a simple dblClick function working. I need to make my canvas div selectable using jQuery UI but doing so breaks the dblClick function.
HTML
<div id="canvas">
<div class="trigger">Click me</div>
<div class="box"></div>
</div>
Javascript
$('#canvas').selectable();
$('.trigger').dblclick(function() {
$('.box').toggleClass('active');
});
Here is a Fiddle
Here is a similar post discussing the incompatibility of .selectable() and .dblclick() on a single DOM element, and I suspect something similar is happening here. If you cancel the .ui-selected event, you'll be able to get back your double-click:
$('#canvas').selectable({
cancel: '.ui-selected'
});
Here's a new Fiddle showing the double-click working now.
$('.trigger').dblclick(function() {
$('.box').toggleClass('active');
});
$('#canvas').selectable({ cancel: ".trigger" });
Here I fixed, it works now. Not sure why you're making your canvas selectable.
I removed the selectable class, and added the .on event :
$('.trigger').on('dblclick',function() {
$('.box').toggleClass('active');
});
Try it with the code above. Please care to explain why you're doing the selectable() to the canvas.

Javascript/jQuery hover on separate elements

I have a strange problem, stemming from a layout that I cannot change to better solve this.
Basically I have a menu like so:
<div id="hornav">
<ul class="container">
<li class="item1">link</li>
<li class="item2">link</li>
</ul>
</div>
And I have drop downs separated like so:
<div class="dropdowns">
<div id="ditem1" class="dropdown-div">content</div>
<div id="ditem2" class="dropdown-div">content</div>
</div>
What i need to do is make the links hover to show the container. I can do this but I also need to make it so if I move my mouse over the drop down that shows, it does not disappear.
Because of the way the site is running, and what tools I am limited by I cannot make the dropdowns inside of the li elements (It is dynamically generated by the CMS, without any options) - This point is extremely important.
Right now this is the javascript code i am using. It functions to an extent, though IT is very buggy (If i hover over the contained element, then hover back it vanishes). This code may be slightly outdated as I have been gradually trying multiple methods, and reading up on this problem with little success.
function dropdown(event,passDown){
var classes=$(passDown).attr('class').split(' ');
for(var i=0;i<classes.length;i++){
if(classes[i].indexOf('item')!=-1){
var classId=classes[i];
}
}
var elem=$('#d'+classId);
event.preventDefault();
if(!elem.hasClass('active')){
$('#hornav li.active,.dropdown-div.active').each(function(){
$(this).removeClass('active');
});
$('#d'+classId).addClass('active');
$(passDown).parent().addClass('active');
}else{
$('#hornav li.active,.dropdown-div.active').each(function(){
$(this).removeClass('active');
});
}
}
$(document).ready(function(){
$('#hornav>ul>li[class*="item"]:not(.item20)').each(function(){ //trigger all drop down links
$(this).hover(function(event){
event.stopPropagation();
console.log(event);
var setIt=this;
if(event.relatedTarget.id.indexOf('ditem')==-1){
dropdown(event,this);
}
});
});
$('.dropdowns .dropdown-div').each(function(){
$(this).hover(function(event){
event.stopPropagation();
console.log(event);
var setIt=this;
//if(event.offsetParent.className.indexOf('item')==-1){
$('#hornav li.active,.dropdown-div.active').each(function(){
$(this).removeClass('active');
});
//}
});
});
});
EDIT:
We have decided to take another approach and are going to use clicks instead of hovers witch will not cause the problem.
I will leave this open for now, as it seems like a question that could help others out.
EDIT 2:
Never solved this and ended up coming up with another completely different solution. However I feel this question may help people in the future so I will leave it open if anyone wants to answer it.
for each child element, fire the events on the parent element:
jQuery(el).on('mouseenter mouseleave', function(e) {
jQuery(this).parent().trigger(e.type);
});

In between parent and iframe: mouseover/out combined with click behavior

I am very new in programming. Please give me a mercy.
According to the post mouseover/out combined with click behavior .
I would like to ask further question since I still cannot achieve the task.
Here below is my code:
Child.html
<div id="custom_div">This div will be highlighted</div>
Parent.html
<iframe id="iframeID" src="Child.html"></iframe>
Click to highlight the custom div in Child.html
<script>
$('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
$('#Custom_div').addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
</script>
What I want to do is:
when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".
Could you please help me to dissolve this? I sought a lot of "accessing iframe element by Jquery" issue ,however, I still cannot understand. It would be very nice if you could provide Jsfiddle example as well.
If I have understand your requirement currently this should resolve this issue
<script type="text/javascript">
$(window).load(function (){
var triggered_div = $('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
triggered_div.toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
triggered_div.addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
});
</script>
this fiddle: http://jsfiddle.net/W4dUa/ should do what you are asking for, if I understood right, however:
First of all, classes and IDs are case sensitive - revise your code, as you have bits like this: $('#Custom_Link') with uppercase C that is different from id="custom_Link"
I believe that this is because you're unbinding mouseenter mouseleave on click:
$(e.currentTarget).unbind('mouseenter mouseleave');
from http://api.jquery.com/hover/
The .hover() method binds handlers for both mouseenter and mouseleave events.
for that reason,
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
does not "work" anymore and the highlight class stays on your div

How do you drag a link without its parent div attached?

I have an image that is linked that is contained by a div. I want to be able to drag the linked image to a tinyMCE control without its surrounding DIV.
HTML:
<div id="image_preview"><img src="someimage" /></div>
For whatever reason it's dragging the DIV along with the IMG and A. Is there a way to get it to not drag the DIV. I've tried preventing default ondrag, onmousedown etc. on the DIV, but then nothing drags.
I've tried:
$(document).ready(function(){
$('#image_preview').on('mousedown', function(){
return false;
});
});
and:
$(document).ready(function(){
$('#image_preview').on('dragstart', function(e){
e.preventDefault();
});
});
and a couple of other things, but of course I knew none of those would do anything other than prevent dragging of anything within the DIV.
HTML:
<div id="image_preview"><img src="someimage" /></div>
<div id="anotherdiv"></div>
jQuery:
$(function() {
$( "img" ).draggable({
stop: function(event, ui) {
$(this).appendTo('#anotherdiv');
}
});
});
Change your markup to this:
<div draggable="false"><img src="someimage" draggable="true" /></div>
You should be able to prevent IE's default dragging bahavior by using something like this:
document.ondragstart = function () {
return false;
};
I had this problem when making a drag & drop image pane to use alongside TinyMCE. This solution worked for me using Firefox's native drag & drop: Instead of wrapping the img tag with a td, tr, etc. as mentioned above, I placed a tiny comment before the image: . This was enough for it to exclude the parent element in the drag & drop, which was a DIV. I hope this helps someone!

Categories