I'm using the draggable='true' attribute to make a draggable element in my website, but I've run into a cosmetic issue.
The dragging is basically done to reorder elements, so I want to pick them up, drag them into their new position, and then simply release them into the new position, but as soon as I let go, the element will slide back to it's original position before moving to the new position.
See this image:
How can I keep this from happening? I want to skip the "goes back" part.
$("div").on('dragend', function(e){
e.preventDefault();
e.stopPropagation();
$("div.slide.placeholder").replaceWith($(this));
updateSlides();
})
Edit:
This issue has been confirmed as localized to Mac. It is very similar to the whole window-bounce effect.
I tried coding what you want using jquery.
-->http://jsfiddle.net/oLc2f3kp
the element that has class .drag_item can be draged. if you release it anywhere that isn't on the area of element that has class .release_area, it will go back to the position before.
I hope it's what you want. if you have any question about this code,ask me then :D
UPDATED I tried over many times now I have the solution
$('div[class=dragable]').on('dragend',function(e){
$(this).css('top',e.originalEvent.pageY-($(this).height()/2));
$(this).css('left',e.originalEvent.pageX-($(this).width()/2));
});
I can't get the position while I'm draging it (the position I got is the original position of the element before start dragging") so the only way( so far I have tested now) is to get the position of your mouse when you drop it and set left and top are same as the position of your mouse.
I have only tested in Chrome. anyways I don't suggest you to do this.
Related
I would like to drag and drop divs within a container-div. Only up and down the list, using the mouse. How can I create this?
Searching the internet and stackoverflow didn't give me a good answer, since I would like to have it in vanilla Javascript and everything is nowadays in jQuery. :S
This is wat I have:
<div class="chapcontainer" data-chaporder="1000">
<div class="chapter">Big fire</div>
<div class="subchapter" data-chapid="1">Forest burning</div>
<div class="subchapter" data-chapid="2">Balu hoses</div>
<div class="subchapter" data-chapid="3">Forest animals die</div>
<div class="subchapter" data-chapid="4">Lovely fire</div>
</div>
</div>
The chapter-div is the container. Within this div I want to be able to move the subchapter-div with a click of the mousebutton up and down the list of subchapter-divs.
For example I move the subchapter-div with data-chapid 4 to the top, then it should be moved to the top and the data-chapid changed to 1. Is something like this possible in vanilla javascript?
I've read about AppendChild, but I don't know how I can trigger this with the mouse.
You could do it with jQuery:
$(".subchapter[data-chapid='1']").on("click", function() {
$(this).css('margin-left', '20px') // add margin/padding/etc here
})
Fiddle
Doing drag and drop yourself is complicated, but here are some of the basic steps. One advantage of rolling your own is you can do more advanced things than your standard jquery ui drag and drop can, like smooth scrolling the container, auto-opening nested tree items if the user hovers over them, or doing animations while moving items.
Steps:
Listen for mousedown events on your items in your container. When the user presses down on an item, store the mouse's offset relative to the top of container (this includes the scroll of the container). Also store the mouse's offset relative to the item being dragged.
Clone the element that's being dragged and absolute position it under the mouse, using the relative offset you stored in step 1.
Make the original element invisible.
Listen for mousemove events on your container. Reposition the dragged item appropriately.
As the mouse moves, you'll need to update the mouse's new offset from the top (including scroll) and figure out which item you're over. You can do this by getting the height of each item in your list. So if your mouse is 710 pixels from the top, and each item is 100 pixels high, you're over index 8. You can use this info to change the style of the item you're over to show that it's a drop target. One thing to watch out for is if you do any styling changes that change the heights of items, you'll need to recalculate your heights.
On mouseup, you already know which item you're over, so now you need to update your data array to move the dragged item, probably using array.splice. Delete the absolutely positioned dragged element, and rerender your list to reflect your changes. I'm assuming you're using some sort of templating library to render your stuff, or at least a render function that clears what's there and replaces it with the current state.
I'm using jQuery.kinetic to allow a div to be scrolled within its parent div by dragging the mouse, just like the demo on the author's site
I want to add a button, which upon clicking it, moves the jQuery.kinetic activated div to a certain position, however I could not find how to do this. I know the scrollLeft and scrollRight methods can be called to change the position, exactly as I want:
$("container-selector").kinetic("scrollLeft", 50);
$("container-selector").kinetic("scrollTop", 480);
However I wish the change in positions to be animated, not immediate like how the code above does it.
Would anybody know how to smoothly move the draggable div to a specified position upon the clicking of a button, and have this animated? Thanks!
From the demo page HERE
$('#yourButtonIdOrClass').click(function() {
$('.container-selector').kinetic('start', { velocity: -10 }); // code to move your container
});
From the Doc's
Start movement in the scroll container at a particular velocity.
This velocity will not slow until the end method is called.
So you need to call the end() method to stop the div from scrolling either to the end of the right hand side or end of the left hand side, you might want to use the moved event and check how much the container has moved something like the below:
moved : function() {
if() // check moved position {
$('.container-selector').kinetic('end');
}
}
The above code will go inside the initialization of the plugin.
NOTE:: you can use the dev tools to check the event listeners attached to the left or right buttons.
I'm trying to position an absolute positioned div using jQuery offset() function.
The idea is to position it at a fixed offset from another element of the DOM. This happens in a quite complex environment with multiple nested divs.
The strange thing that happens is that calling it twice gives two different results. To me it seems there is no reason for this, although I am quite new at jQuery so I could be oversighting something obvious.
I do think that
var pos = $(document.getElementById(someElementInTheDOM)).offset();
$(document.getElementById(MyDiv)).offset( pos );
should position MyDiv always in the same place, even if I call this code some 10 times. That's what correctly happens in this fiddle. Click on the magnifying glass several times, everything is ok.
But as soon as I start adding display:none and display:block properties the thing gets disrupted. I tried to bring it down to basic and I created a fiddle here. To see what I mean press on the magnifying glass, click on the magnifying glass again, click on the magnifying glass once more, close the div by the white "X", click on the magnifying glass once more.
Any clue what's going on?
You just have to change the order:
document.getElementById("iuocboun_filter_window").style.display="block";
$(document.getElementById("iuocboun_filter_window")).offset( pos );
instead of
$(document.getElementById("iuocboun_filter_window")).offset( pos );
document.getElementById("iuocboun_filter_window").style.display="block";
EDIT:
Explanation: The offset does not work on hidden elements, thats why you have to make it first visible and than set the offset. ;)
I use this code:
$("img.cloudcarousel").each(function(i, e){
coords[i] = $(e).offset();
});
to save the position of the images (and it works).
Then I animate them and move them.
Then I use this code:
$("img.cloudcarousel").each(function(i, e){
$(e).animate({top:coords[i].top, left:coords[i].left}, 1000);
});
to animate them back to where they belong.
in IE (at least 8) it works fine but in Chrome and Firefox it animates 40-50 pixels too much to the left and down (like its over-animating).
dont ask me how I discovered this: when i use mousewheel over them they go to where they belong!
I guess it's somehow related to the buildup of the animation queue, however I only use four images and it doesn't fix on its own after x time, only on the mousewheel stuff.
edit : added to jsfiddle.net
I'm not really sure how that site works but I added my HTML and JS into it:
http://jsfiddle.net/3wqYg/
The $(e).offset() is not returning the values that is currently defined in your fiddle. I have not looked up the definition of offset but if you output the coords, you will see it is not the same as in the code
Edit: I see the problem see offset() http://api.jquery.com/offset/ it returns the x, y relative to document BUT when you animated it back it is relative to the parent element (default behavior). So in the doc it mentions using position(). that is relative to the parent element, I have not tried it but if you use that it should work.
Final Edit: yep works fine with position see http://jsfiddle.net/3wqYg/1/ you must copy it into a test page because it does not animate on fiddle
I want to trigger an event handler when the user hovers on a particular part of the image, like the center of the image or the right side of the image (area would include, say, about a 100 pixels). I am not using any framework, so this is normal javascript that I am working with.
I am not sure if using image maps would work. Can anyone help?
Quirksmode about mouse position
Given the craziness involved here I would:
Use a framework (I just did something like this with Mootools)
Put absolutely positioned divs over the image and listen to events on them, instead of the image (did this too recently, a left 50% and a right 50%, way less cumbersome than tracking the mouse position).
Or go for it, quirksmode gives a decent function to get the mouse position, then you'll need to calculate the position of the image, then do the math to get the position of the mouse on the image, do the math in a mouseover event of the image, then continually check if the position meets your criteria, then do something about it when it does :)
You can use the MouseMove event to find out the location of the cursor, and then implement your own logic to calculate this position relative to the image.
See this page on getting the mouse coordinates.
i do not know how many areas you need and if they need to be especially shaped or something like that....
a straightforward solution would be placing (CSS) empty div elements "over" the image which will trigger the events
afaik it is not possible to trigger js events with an image map
An image map coupled with jquery is a great solution I've used before. I see that you're not using a framework, but it's worth a look.
Here's a little code snippet I used with an image map and mouseenter / mouseleave events.
$(".map-areas area")
.mouseenter(function() {
idx = $(".map-areas area").index(this);
showMapArea(idx);
})
.mouseleave(function() {
$(".map-hovers img").hide();
$(".map-titles img").hide();
});
I suggest putting an invisible div in the place where you want to check for mouse_over in the image. (In the case that the area you want is rectangular of course). And then trigger on mouse_over for this div.
If you want to check for non rectangular areas (that can't be a div), I would suggest that you put a div of the same size of the image on top of it. Check mouse position on that div, and use it to compare with a mask image.
Example:
MousePosOnGhostDiv_X = 76;
MousePosOnGhostDiv_Y = 145;
if(CheckColorOfMaskImage(MousePosOnGhostDiv_X,MousePosOnGhostDiv_Y)=="orange") do something.
By knowing which color it is on the mask image you can set multiple events.