I am developing an image cropper and would like to ask you the following question: In order to prevent the default drag n' drop action when you press the left button on an image and keeping it pressed try to move the mouse, wouldn't it be cross-browser if to just use the picture as a background to a div box?
Just like so:
<div id="theDiv" style="background:url(pic.png) no-repeat;"></div>
How do you think? Is it acceptable? Not too ugly? Or should be done with JS?
I would do the same, there is no real other way (as far as I know of) of doing what you want to do crossbrowser.
Are you using a framework? Isn't there a reliable "dragstart" implementation in each of them that can simply be made return false? Correct me if I'm wrong.
You can set your own mouse events which will be more logical way. You will not even need to write code on per-browser basis AFAIK.
This event handlers can be used to set crop frame also.
But your approach is simpler, if you haven't plans on extend this much .
wouldn't it be cross-browser if to just use the picture as a background to a div box?
Yes, but you'd still be starting a drag; if you moved the pointer over into part of the page with text in, you'd be selecting the text, which you probably wouldn't want.
I'd stick with the x.ondragstart=x.onmousedown= function() { return false; };.
I might use draggable="false" or ondrag="return false" but your method works just as well.
You may take a look at this for example, which is a simple and fast image cropper written with pure JavaScript. It uses mousedown to detect drag start and mouseup for drag end. During dragging, it listens document.onmousemove event.
Related
Where can I use the cursor style: ns-resize?
Do I have to define an event[script] describing the functionality of the cursor. On what html objects can I use a cursor with this style?
This question is very important for how to use cursors with dragging functionality i.e. for the following cursor styles-
move
col-resize
row-resize
n-resize
s-resize
e-resize
etc.
The style of the cursor makes absolutely no difference whatsoever. You can put ns-resize on your entire document if you really want to, although I don't think your visitors will think much of your site if you do.
If you have an element for which you have programmed a resize function triggered by dragging something, then you may put the ns-resize cursor (or the appropriate one) on that handle to illustrate to the user that they can do that.
Looking for some help a simple onclick effect, sadly my memory is the same as a Gold fish so i cannot remember what to search to get some help on this.
Here's an example http://www.iconfinder.com/search/?q=
If you click the Logo it kinda moves down like a Push.
Just something like that
Would really appreciate some help thanks.
In most cases you should do this in CSS with the :active selector. (https://developer.mozilla.org/en-US/docs/Web/CSS/:active)
If you really do want to use javascript you will have to bind on mousedown (to set the margin/position/class) and on mouseup (to set it back to original) and probably on mouseleave for good measure.
I'm building a very basic online application where you can take images from a toolbar (or some kind of storage box, since there will eventually be quite a few images) and drag and drop them onto a canvas. I'm new to web development, but I know how to do the drag and drop, I'm just looking for a way to make a toolbar and put images in it. Ideally, I'd like a box with a scrollbar.
This seems like it should be a pretty simple problem. Any help would be much appreciated!
The simplest way I ended up discovering was using
overflow: scroll;
in the CSS div containing the images.
Here's a very good and simple demonstration of the use of drag&drop in HTML5 :
http://html5demos.com/drag
Beware that it's easy to drag links (as in this demo) but it is not possible to drag any images that aren't inside links in IE9.
If you want a totally cross-browser solution, you'll have to revert to old solutions (track mouse down, move and up and set yourself the position of objects).
If you say you know drag&drop and just want a box with a scroll bar then check this: http://jqueryui.com/demos/slider/side-scroll.html
I want to build into my app a way to select multiple objects on the screen (this is an HTML page with a bunch of absolutely positioned HTML divs). You know, like when you click down with the mouse and drag a transparent/translucent box and anything within that box gets selected upon mouse release?
I don't know how to go about coding that. How would you? Or pointers to solutions is acceptable as well.
Consider using jQuery javascript library. It has an extension jQuery UI that provides abstractions for interaction and animation. For drag an drop you have: Draggable
Here is what I would do.
Mousedown creates a high z-index div, transparent body with a nice border, which has its dimensions informed by mousemove. On mouseup you compare the region of that div with applicable elements. This wouldn't be particularly hard to do without a library, but YUI3 makes it pretty simple, have a look at http://developer.yahoo.com/yui/3/api/Node.html#method_inRegion
HTH.
I am simply looking for a way of using drag and drop without jquery or any other library. If a dragged object is dropped on another element the later element should start an event (in FF - better would be browser independent).
I know that drag and drop for JavaScript was discussed sometimes before but the previous postings didn't help me.
Although I found some examples it is not clear to me if there is a "drop" or "dragdrop" events exist but these things don't work:
<p ondrop='alert("It worked");'>Text</p>
<p ondragdrop='alert("It worked");'>Text</p>
How could this be done?
Many thanks in advance.
I agree with the other answers. A library will save you a lot of time and headache. This is coming from someone who just recently created a drag-and-drop control from scratch.
If you insist though this is what you'll need to do:
Bind a onmousedown event to the div you want to drag (div.onmousedown).
Change the div's position style to absolute (div.style.position = 'absolute')
Begin capturing mouse movement (document.onmousemove).
On mouse move update the div's position (div.style.top|left = '[location]px')
On the div's onmouseup event (or the document's) unbind all the handlers and do any other cleanup (null out position changes, etc).
Some problems a library will probably solve:
While dragging you will select text on the page (looks ugly).
Binding to events is different between browsers.
You have to calculate the size of the element being dragged if you want to show placeholders and to make it not "pop" when you begin dragging the control (since changing to absolute positioning will remove the element from flow).
You will probably want your dragged element to move fluidly so you will have to store some mouse offset when selecting the element or automatically center the element to the mouse.
If you want to drag an item in a list you'll have to write a ton more custom code for that list to accept the dragged item.
You'll have to take into consideration dragging when the window is scrolled and possibly dragging inside other elements that are positioned strangely.
I am simply looking for a way of using drag and drop without jquery or any other library.
I'm sorry, but there are no such thing as simply drag and drop without any library. You can write it all yourself, but that will be a lot of JS to make it work in all browsers.
Hmm. It's probably not that simple that you'd want to do it yourself, but I would look at Peter Michaux's FORK Javascript drag and drop library -- unlike JQuery or all those big libraries, FORK's modules are decoupled from each other, and are simple enough that you could probably look at Peter's source code and figure out the bits you need. (edit: I'd just use FORK.Drag as it's really small: 7.6KB total minified)
While I agree that library is the way to go, the answer you want is onmousedown, onmousemove, onmouseup. You have to handle those three events.
In onmousedown you'd find the target (event.target or similar in different browsers) and set draggedObject = event.target. You'd also start handling the onmousemove event.
Whenever the onmousemove event fired, you'd move the dragged element based on the difference in position since last time the onmousemove event fired.
In the onmouseup event, you'd clear your draggedObject variable and stop handling onmousemove.
It's not very crossbrowser, but it's the core of what you'd need to do for dragging and dropping.