Cross Browser Compatible Drag/drop

Mar 3, 2007

This drag/drop code will work in IE and FF, and most likely Opera too...

All you have to do is insert the following code in between the <head></head> tags and set any element's class attribute that you'd like to render draggable to "dragdrop".

CSS...

<style type="text/css">
.dragdrop{
position:relative;
cursor:pointer;
}
</style>

Javascript...

<script language="javascript">
var mousedown=false;
var obj=null;
var omx=0;
var omy=0;
var oox=0;
var ooy=0;

function getEvent(e){
if(!e){e=event;}
return e;
}
function getObj(e){
e=getEvent(e);
if(navigator.appName.indexOf("Netscape")!==-1){
return e.target;
}
else{
return e.srcElement;
}
}

document.onmousedown=function(e){
e=getEvent(e);
obj=getObj(e);

if(obj.className!=="dragdrop"){
obj=null;
}
else{
mousedown=true;
omx=e.clientX;
omy=e.clientY;
if(navigator.appName.indexOf("Mozilla")!==-1||navigator.appName.indexOf("Netscape")!==-1){
oox=obj.style.left;
ooy=obj.style.top;
}
else{
oox=obj.style.pixelLeft;
ooy=obj.style.pixelTop;
}
}
}

document.onmouseup=function(e){
obj=null;
mousedown=false;
}

document.onmousemove=function(e){
var e=getEvent(e);
if(mousedown==true){
oox=oox.toString().replace(/px/,"")*1;
ooy=ooy.toString().replace(/px/,"")*1;

obj.style.top=ooy+e.clientY-omy;
obj.style.left=oox+e.clientX-omx;
}
}

</script>


You can preview this script in action here...

View 3 Replies


ADVERTISEMENT

Cross Browser Window Drag & Drop

Jul 20, 2005

I'm looking for a javascript that lets me drag an image from one
browser window to another. Is there a solution for this problem?

View 1 Replies View Related

Best Cross Browser Compatible Swipe Script For Android , Iphone And Other Touch Phones?

Jan 20, 2011

I'm looking for the best cross browser compatible swipe script for android, iphone and other touch phones. Has anyone used any of the available frameworks or have you used custom scripts? [code]...

View 1 Replies View Related

JQuery :: Good Web UI Component Libraries - Cross Browser Compatible And Have Good Documentation

May 10, 2009

Are there any good web UI component libraries -open source or commercial - that you can recomment? They need to be cross browser compatible and have good documentation. Jquery UI is very good but limited in number of controls it offers. YUI is very verbose and very hard to use. extJs only other one I can think of. Any others you use and like?

View 2 Replies View Related

Drag From Outside Web Browser And Drop

Jul 23, 2005

As the subject says, is this possible. I'd like to drag a file onto a button and have the filename accesable within that pages javascript.

View 1 Replies View Related

Cross Browser, Cross Domain Iframe Resizing Script?

Jun 18, 2009

Is there any way to resize an iframe dynamically to the height of its content that works cross browser and works when the iframe content is on another domain than the main page (I have access to both pages, so code can be put in either) Also, it must resize when links in the iframe are clicked (ie when a new page within the iframe is loaded)

View 1 Replies View Related

Drag And Drop Breaks After First Drop?

Feb 20, 2011

So, what it does: You can successfully drag something anywhere, but when you click it again, it resets to its original position (I don't know why), and when you try to drag it again, as soon as your cursor touches the object it disappears (I don't know why). why it is happening and how to fix it!

// JavaScript Document
var posX;
var posY;
var element;

[Code]....

the html is a simple (position is set to relative):

<p id="square" onmousedown="drag(event)">meep</p>

EDIT: This is the first time I've written javascript code and would like to learn the basics, which is why I am not using a library.

View 1 Replies View Related

How To Drag And Drop

Mar 6, 2010

I can't figure out how to drag and drop. I've followed some tutorials but no success. I use Firefox as my browser. Any tutorial you would recommend?

View 2 Replies View Related

Using YUI Drag And Drop

Jan 25, 2007

I am using YUI's Drag and Drop utility to add some drag & drop functionality to a CMS I'm building.

This works just fine and is very easy to set up, but the thing I'm wondering about, how do I restrict the dragging? In other words; how can I make sure an element gets dragged within the borders of, say, some div and not outside them?

View 2 Replies View Related

Drag & Drop With Pictures

Dec 23, 2006

I build my first Drag & Drop with JavaScript and I would like to drag
the pictures when I click on it.

When I create a normal div tag with some text the script works, but
when I put a image in the div tag it works not correctly.

Here is my Code... I integrated three pictures and one text, then you
can see the differences.

a part of my html site:

View 2 Replies View Related

Emulating Drag And Drop?

Jul 20, 2005

I'm in the middle of creating a project management system for our office, and I was wondering if javascript is capable of emulating drag and drop? This would allow me to do some cool stuff.

View 1 Replies View Related

Drag And Drop Library

Jan 11, 2006

After a good deal of internal development, I've decided this library will do more good in the wild. It works in IE6, Safari 2, Opera 9, Firefox 1.5, and IE5.5/Mac (sort of buggy behavior with text selection in IE5.5/Mac though). It should also work in virtually any version of Gecko, Opera 6+, Safari 1, and IE5+ (anybody who wants to test those, feel free). The scripting is highly efficient, and only exposes two functions globally, Draggable and Droppable. The below code is licensed under the LGPL, though it is available under other licenses per request.

Let me know if you have any issues with it - this is something I'm interested in maintaining. Also, compared to other scripts, such as script.tac.ulo.us, this is much less code (lots of whitespace/comments could be taken out), and more widely supported across browsers.

Other than below, it can be found here: http://www.jasonkarldavis.com/scripts/dragdropable/dragdropable.html

// dragdropable.js (1.0.1)
//Copyright (C) 2006 Jason Davis, www.jasonkarldavis.com
//This code is licensed under the LGPL:
//http://www.gnu.org/licenses/lgpl.html
//
// Documentation:
//This script exposes two global variables, Draggable and Droppable. To make an
//element draggable, simply call `Draggable(element)`. This sets the necessary
//CSS properties and event handlers. It also overrides the addEventListener and
//and attachEvent methods (if present) to include the following events:
//onstart(When the element begins dragging)
//ondrag(When the element is being dragged)
//onstop(When the element has stopped dragging)
//You may also assign element.onstart, element.ondrag, and element.onstart to
//add event listeners.
//Lastly, if you need to physically prevent an element from dragging, you may
//call event.preventDefault() from within the onstart handler.
//
//To make an element droppable (have things dragged onto it), call
//`Droppable(element)`. This sets the necessary event handlers and coordinate
//searches. Once again, it overrides addEventListener and attachEvent to
//include the following events:
//onhover(When another element has been dragged over the element)
//ondrop(When another element has been dropped onto the element)
//onunhover(When another element has been dragged off the element)
//As before, you may also set element.onhover, element.ondrop, and
//element.onunhover directly.
//To remove all drop points from the current session, call `Droppable.reset()`.
//
//The event object is also extended with the following properties:
//dragTarget(The element being dragged)
//dropTarget(The element being dropped onto)
//
// Known bugs:
//* removeEventListener and detachEvent do not work with the custom events.
//Workaround: Use direct assignment (element.onevent) instead.
//* There is no way to remove a single drop point.
//Workaround: Call Droppable.reset(), then reinitialize the other drop points.
//* There is no way to remove dragging from an element.
//Workaround: element.onstart = function(event) { event.preventDefault() }
//* Changing position of droppable elements after initialization breaks drop
//Workaround: Static droppables are much faster than moving ones. Either call
//Droppable.reset() and reinitialize often, or ask the author to modify the
//script to account for this (and accept the resulting slowdown)


function Draggable(element) {
// initialize drag variable
var x = 0, y = 0, oldMouseMove, oldMouseUp;

// get style properties of element
var computedStyle;
if (typeof document.defaultView != "undefined" && typeof document.defaultView.getComputedStyle != "undefined")
computedStyle = document.defaultView.getComputedStyle(element, "");
else if (typeof element.currentStyle != "undefined")
computedStyle = element.currentStyle;
else
computedStyle = element.style;

// prep element for dragging
if (computedStyle.position == "static" || computedStyle.position == "")
element.style.position = "relative";
if (computedStyle.zIndex == "auto" || computedStyle.zIndex == "")
element.style.zIndex = 1;
element.style.left = isNaN(parseInt(computedStyle.left)) ? "0" : computedStyle.left;
element.style.top = isNaN(parseInt(computedStyle.top )) ? "0" : computedStyle.top;

// default event listeners
function onstart(event) {
event.dragTarget = element;
x = event.clientX;
y = event.clientY;

// Override preventDefault
event.preventDefault = (function(original) {
return function() {
element.ownerDocument.onmousemove = oldMouseMove;
element.ownerDocument.onmouseup = oldMouseUp;
original.call(event);
}
})(event.preventDefault || function() {});

if (element.onstart) element.onstart(event);
}
function ondrag(event) {
event.dragTarget = element;
element.style.left = parseInt(element.style.left) + event.clientX - x + "px";
element.style.top = parseInt(element.style.top) + event.clientY - y + "px";
x = event.clientX;
y = event.clientY;
Droppable.query(event);

if (element.ondrag) element.ondrag(event);
}
function onstop(event) {
event.dragTarget = element;
Droppable.query(event);

if (element.onstop) element.onstop(event);
}

// make listeners active
element.onmousedown = (function(oldMouseDown) {
return function() {
// Call old listener
if (oldMouseDown) oldMouseDown.apply(this, arguments);

// Store old event handlers
oldMouseMove = this.ownerDocument.onmousemove;
oldMouseUp = this.ownerDocument.onmouseup;

// Setup events
this.ownerDocument.onmousemove = function() {
// Call old listener
if (oldMouseMove) oldMouseMove.apply(this, arguments);

// Call ondrag
ondrag.call(element, arguments[0] || event);

return false;
}
this.ownerDocument.onmouseup = function() {
// Call old listener
if (oldMouseUp) oldMouseUp.apply(this, arguments);

// Call onstop
onstop.call(element, arguments[0] || event);

// Restore old event listeners
this.onmousemove = oldMouseMove;
this.onmouseup = oldMouseUp;

return false;
}

// Call onstart
onstart.call(this, arguments[0] || event);

return false;
}
})(element.onmousedown);

// override event attachers
if (element.addEventListener)
element.addEventListener = (function(original) {
return function(event, listener, useCapture) {
switch (event) {
case "start":
onstart = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onstart);
break;
case "drag":
ondrag = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(ondrag);
break;
case "stop":
onstop = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onstop);
break;
default:
original.call(element, event, listener, useCapture);
}
}
})(element.addEventListener);

if (element.attachEvent)
element.attachEvent = (function(original) {
return function(event, listener) {
switch (event) {
case "onstart":
onstart = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onstart);
break;
case "ondrag":
ondrag = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(ondrag);
break;
case "onstop":
onstop = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onstop);
break;
default:
original.call(element, event, listener);
}
}
})(element.attachEvent);


if (window.attachEvent)
window.attachEvent("onbeforeunload", function() {
onstart = ondrag = onstop = element.onmousedown = element.addEventListener = element.attachEvent = null;
element = null;
});
}


// initialize Droppable in the global scope
var Droppable;

(function() {
if (document.getBoxObjectFor) {
function getOffset(element) {
var box = document.getBoxObjectFor(element);
return { x: box.x, y: box.y };
}
}
else if (document.all && navigator.appName == "Microsoft Internet Explorer" && !window.opera) {
function getOffset(element) {
var range = document.body.createTextRange();
range.moveToElementText(element);
var rect = range.getBoundingClientRect();
return { x: rect.left, y: rect.top };
}
}
else {
function getOffset(element) {
var accumulator = arguments[1] || { x: 0, y: 0 };
if (element && element != document.body) {
accumulator.x += element.offsetLeft;
accumulator.y += element.offsetTop;
return getOffset(element.offsetParent, accumulator);
}
else {
return accumulator;
}
}
}

// initialize private pointers to current target information
var cTarget = null, cHover = null, cUnhover = null, cDrop = null;
function hotSpots(x,y) {
cTarget = cHover = cUnhover = cDrop = null;
}

// declare Droppable within the private scope
Droppable = function(element) {
// Calculate offset
var offset = getOffset(element);

// Calculate other edge offset
var edge = { x: offset.x + element.offsetWidth, y: offset.y + element.offsetHeight };

// Assign a finder function
hotSpots = (function(old) {
return function(x,y) {
if (offset.x <= x && x <= edge.x && offset.y <= y && y <= edge.y) {
cTarget = element;
cHover = onhover;
cUnhover = onunhover;
cDrop = ondrop;
}
else {
old(x,y);
}
}
})(hotSpots);

// default event listeners
function onhover(event) {
event.dropTarget = element;
if (element.onhover) element.onhover(event);
}
function onunhover(event) {
event.dropTarget = element;
if (element.onunhover) element.onunhover(event);
}
function ondrop(event) {
event.dropTarget = element;
if (element.ondrop) element.ondrop(event);
}

// override event attachers
if (element.addEventListener)
element.addEventListener = (function(original) {
return function(event, listener, useCapture) {
switch (event) {
case "hover":
onhover = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onhover);
break;
case "unhover":
onunhover = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onunhover);
break;
case "drop":
ondrop = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(ondrop);
break;
default:
original.call(element, event, listener, useCapture);
}
}
})(element.addEventListener);

if (element.attachEvent)
element.attachEvent = (function(original) {
return function(event, listener) {
switch (event) {
case "onhover":
onhover = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onhover);
break;
case "onunhover":
onunhover = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onunhover);
break;
case "ondrop":
ondrop = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(ondrop);
break;
default:
original.call(element, event, listener);
}
}
})(element.attachEvent);


if (window.attachEvent)
window.attachEvent("onbeforeunload", function() {
hotSpots = onhover = onunhover = ondrop = element.addEventListener = element.attachEvent = cTarget = cHover = cUnhover = cDrop = null;
element = null;
});
}

// Setup a query method
Droppable.query = function(event) {
var oTarget = cTarget,
oHover = cHover,
oUnhover = cUnhover,
oDrop = cDrop;

var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft,
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;


hotSpots(event.clientX + scrollLeft, event.clientY + scrollTop);

switch (event.type) {
case "mousemove": // onhover & onunhover
if (oTarget != null && oTarget != cTarget)
oUnhover.call(oTarget, event);
if (oTarget == null && cTarget != null)
cHover.call(cTarget, event);
break;
case "mouseup": // ondrop
if (cTarget != null) {
cUnhover.call(cTarget, event);
cDrop.call(cTarget, event);
}
break;
}
}

Droppable.reset = function() {
hotSpots = function(x,y) {
cTarget = cHover = cUnhover = cDrop = null;
}
hotSpots();
}
})();

// Fix the function prototype for IE5/Mac
if (typeof Function.prototype.apply == "undefined")
Function.prototype.apply = function(scope, args) {
if (!args) args = [];
var index = 0, result;
do { -- index } while (typeof scope[index] != "undefined");
scope[index] = this;

switch (args.length) {
case 0:
result = scope[index]();
break;
case 1:
result = scope[index](args[0]);
break;
case 2:
result = scope[index](args[0], args[1]);
break;
case 3:
result = scope[index](args[0], args[1], args[2]);
break;
case 4:
result = scope[index](args[0], args[1], args[2], args[3]);
break;
default:
result = scope[index](args[0], args[1], args[2], args[3], args[4]);
break;
}

delete scope[index];
return result;
}

if (typeof Function.prototype.call == "undefined")
Function.prototype.call = function(scope) {
var args = new Array(Math.max(arguments.length-1, 0));
for (var i = 1; i < arguments.length; i++)
args[i-1] = arguments[i];
return this.apply(scope, args);
}

View 7 Replies View Related

Create A Drag And Drop Box?

Jan 28, 2010

I really like the drag-drop box from bbc.co.uk, but I don't know how to do it. Can anybody help me to create a page like that?

View 1 Replies View Related

Drag & Drop From Scratch?

Mar 27, 2006

Anyone know a good 'Drag&Drop' tutorial? i mean those tutorials that teach you how to implement the drag-and-drop-elements from scratch. All what i found so far were tutorial(s) teaching you how to use an existing library. I'll eventually use a library, but i'd rather learn it's basics first and implement it myself the first time.

View 4 Replies View Related

Drag & Drop Tree

Mar 28, 2006

Does anyone know of a publicly available drag & drop tree script? Google only turned up a bunch of nice tree scripts, but none of them have drag & drop functionality.

View 3 Replies View Related

Drag 'n' Drop Project

Jun 27, 2006

Here is a small test for all those hardcore JavaScript programmers. Is it possible to drag'n'drop a text/image element (eg. A or IMG tag) from one (I)FRAME to another (I)FRAME. This is easy & possible with IE's proprietary ondrag events. However the question is, is there a work-around using standard W3C/Firefox onmousedown, onmouseup, etc. events only? Code:

View 2 Replies View Related

Accept A Drag-and-drop File?

Jul 23, 2005

Is there a way to make it possible for an <input type=file> form element to accept a drag-and-drop file or will the browser window always accept the file?

View 1 Replies View Related

Request Fileinfo On Drag/drop

Jul 18, 2006

Is it possible to request filename and path of a file dragged from eg. the desktop onto a drop-event-enabled element?

View 2 Replies View Related

JQuery :: Drag And Drop A Link In IE7?

May 5, 2010

Im having the exact same problem as posted here:[URL]

When I drag my link to my droppable area, an ajax request is supposed to triggred, but it seems like the whole page is beeing reloaded. This works fine with Chrome and Firefox. It works in IE if I have insert an alert in the drop function.

Im including the drop code I have:

$('.droppable').droppable({
drop: function(ev, ui) {
var intSourceObjectType = ui.draggable.attr('objecttype');
var intSourceObjectId = ui.draggable.attr('objectid');

[Code]....

View 1 Replies View Related

JQuery :: Drag And Drop, Very Slow?

Dec 7, 2007

Please the link to see what I have done so far...[URL]... It is a day planner, where various places can be dragged on to the day planner. It works, but it seems very slow. Running firebug profile when dragging a simle place into a single slot tells me that over 35,000 calls were made.

View 7 Replies View Related

JQuery :: Drag N Drop With Ajax?

Jun 11, 2009

I've got a page that uses the draggable and droppable feature - [URL]

It also uses jQuery to call a web service via Ajax - this also works fine.

However, I want to call the web service only when an item is dropped onto the objeect but when I try to add the Ajax function inside the $("#droppable").droppable({ drop: function(event, ui) {.... it doesn't seem to work.

You can see my code at [URL]

View 1 Replies View Related

JQuery :: Drag And Drop In Tabs?

Aug 12, 2009

I am using jQuery Tabs to make an ajax call for each tab when clicked. The ajax that displays is like inettuts. 3 or 4 columns of widgets that can be dragged and dropped. The problem that I am having, when I put the html of the result directly in the main page, it works as designed. When I click on a tab, it displays the page, but all the jquery functions in that ajax page are gone and I cannot sort, drag and drop anything. I suspect that the ajax page is not reading the javascripts in the head, which are on main page. Unfortunately I can't remove them to include them in ajax pages dynamically because I am also using them for other functions in main page. Is there a way to make those ajax pages read the javascripts on that main page?

[URL]

View 3 Replies View Related

JQuery :: Drag And Drop Photos To Right Box

Oct 29, 2009

I found fantastic drag and drop technique, analyzied javascript file and would like to get helo, how to create it. Here: [URL] you can drag and drop the photos to the right box, then you can email them. How can I create it on my own website? You can find javascript file here: [URL]. Is it possible at all?

View 2 Replies View Related

Drag And Drop Selection Forms?

Aug 20, 2009

How can I make it so i can drag and drop usernames from one selection box to another?Here's the code of two selection boxes one of which would be populated with usernames and another is empty where you move the username into to register him as banned.

Code:

<td class='col_gr'><select size='12' style='padding:0; margin: 0 auto; width: 100%;'>";
$userCount = 0;
while ($userCount < $servSize2)

[code]....

View 9 Replies View Related

<div> Id And Drag N Drop Some Images From One Iframe To Another

Jul 16, 2010

I am building a web site in html5 and right now i am working in drag n drop some images from one iframe to another.Until now everything worked great.Today i connected my first iframe with my database so all the pictures are taken from there.For this reason, in my code, i create several <div>,each one with id>=1. My code for this is the following:

[Code]...

So,so far i created several <div>s with one class "drag" and different ids starting from 1 until 4. And here start my problems!I have to change my code for the drag and drop functions in javascript in order to create a specific array with objects with id the <div> id.In more details,my code so far:

[Code]...

View 2 Replies View Related

Tip: Drag & Drop Files Into I.E. (JScript/OLE)

Apr 15, 2004

The Windows common controls include a VBDataObject interface that can be utilized during drag|drop events (as an argument). Retrieving the path of files dropped onto a control is as simple as checking the format of the Data Object for vbCFFIles (constant = 15), and if true, enumerating the Files collection (1-based) for each item (which returns the full path as a string).

The Animation Control is simplest one I've found for demonstrating this:
Some information about that control is here...

(http://msdn.microsoft.com/library/devprods/vs6/vbasic/vbcon98/vbconusinganimationcontrol.htm)

<html>
<head>
<title>IVBDataObject Demo</title>

<style type="text/css">
fieldset{
text-align:center;
padding:2em
}
object{
width:3em;height:3em;
border:6px double activecaption;
vertical-align:middle
}
textarea{
width:60%;margin-top:1em;
word-wrap:normal;
vertical-align:middle
}
</style>

</head>
<body>

<fieldset>
<legend><strong>Drop File(s) ยป </strong>

<object id="IAnimation"
classid="clsid:B09DE715-87C1-11D1-8BE3-0000F8754DA1">
<param name="OleDropMode" value="1">
</object>

&nbsp;</legend>
<label><em>output: </em></label>
<textarea id="output" cols="100" rows="10"></textarea>
</fieldset>


<script type="text/JScript">

function IAnimation::OLEDragDrop(Data){
if(Data.GetFormat(15)){
var O = "";
var e = new Enumerator(Data.Files);
while(!e.atEnd()){
O += e.item() + "
";
e.moveNext();
}
output.value = O;
BackColor=0x80000003;}
}


// Just for visual feedback...

function IAnimation::OLEDragOver(Data, _, _, _, _, _, State){
if (State == 0){
if(Data.GetFormat(15)){Backcolor = 0x80000002;}
}
if(State == 1){Backcolor = 0x80000003;}
}

function window::onload(){
IAnimation.BackColor=0x80000003;
}
</script>
</body>
</html>


Probably most useful in HTAs, when scripting the FileSystem or Shell objects...

View 12 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved