Script Or List Component That Allow To Change Order By Drag & Drop?

Jan 4, 2010

looking for a script or list component that allow to change order by drag & drop

View 2 Replies


ADVERTISEMENT

JQuery :: Auto-re-order Drop Down Values On Change The Value Of Drop Down?

Nov 19, 2011

I am implementing auto re-order drop down values in asp.net. My requirement is something: I have five drop down and each has populated using 1 to 5 values. when I changevalue from dropdown, other drop down values(numberordering)should change automatically.

View 1 Replies View Related

JQuery :: Drag & Drop To Sort Categories And Post This New Sort Order To DB?

Jun 9, 2009

OK so Ive been using jquery for a little bit now and love it. I am a ColdFusion developer. I have a need where I would like to present the user with a list of categories and the user can drag and drop to sort, but then I need to post this new sort order to the database. So I see there are a ton of cool drag & drop plugins for jquery. I understand how they work and I can get it to work as far as spitting out DIVS or spitting out ULs that can be sorted, but then what? So now they are sorted on my screen and not really part of the form. How do I translate that into something I can do a post to the database with? Do I do an AJAX call every time they drop an item and try to extrapolate the sort order on that item after they drop it? Do I populate a hidden form field with the constantly updating sort order list? MAybe a list of ID's? How does everyone else go about this this task? I'm sure there is more than one way and I'm sure this is a common task.

View 1 Replies View Related

Adding To & Sorting A List By Drag 'n' Drop?

Mar 11, 2009

I have a webpage with a unordered list of html tables which is made sortable by drag 'n' drop using the Midori Javascript Framework.

I've tried to add a button to create another item on the list using AJAX. However the items added by the button do appear but they are not draggable.

I've never used much javascript so I'm not able to figure out why the code below doesn't work as I intended.

<html>
<head>
<script type="text/javascript" src="midori.js"> </script>
<script type="text/javascript">
midori.addEventListener(window, 'ready', function (e) {

[Code]....

View 1 Replies View Related

JQuery :: Picking The Order Of Images In A Component?

Jun 22, 2010

I have a problem. I have a div component where I'll drag multiple images. This part is working perfectly. But I am not able to read the order of these images played in the component. What happens, I can play any position in the image of the div component, however, like to read in order as they are, from left to right.

I believe it is possible, but the solution must be complicated. Some of his friends could help me in the routine javascript to read this?

[Code]...

View 4 Replies View Related

JQuery :: Evaluate Component Of AJAX Response After Injecting HTML Component In Page?

Nov 1, 2010

You have an AJAX request and the response is mixed HTML + JavaScript. The javascript is referring to elements in the HTML component. Currently the JavaScript gets evaluated first thing when success is triggered and the HTML is returned as a parameter. Obviously this is not going to work ( in this scenario anyway ). As a previous Mootools user I was used to Request.HTML's responseJavaScript parameter and evalScripts option. None of there options are available in the $.ajax implementation.

P.S. I know I could make the javascript a file and load it separately. I know I can make my response JSON and have the js and html in separate properties of the JSON object. I want neither.

View 4 Replies View Related

Change Occurance Of Text In A Drop Down List

Apr 6, 2011

I have the following html:[code]I would like to know if there was a solution in JS which would change the occurance of the 'and' in the last option to '&'.Therefore after the JS has kicked in, the html will read:[code]

View 3 Replies View Related

Advanced DHTML Dropdown List Component With Autofilter Feature

Jul 20, 2005

Advanced DHTML Dropdown List component (Javascript,ASP,.NET,PHP)
enhances usability of large dropdown lists with type & select feature.
It suggests possible matches for entries you type in the input box.
Works in all browser with DIV, CSS and JavaScript support: IE5+,
Netscape6+, Mozilla, Opera. The script allows full customization with
style sheets, single and multiple select mode. Code:

View 2 Replies View Related

Change Form Fields Based On A Drop-down List?

May 16, 2010

I need to be able to change the fields of a form based on a drop-down list. Like if someone picks option A field 1 shows and if they change it to option B field 1 and 2 show up without reloading the page.

If you need me to explain more I will try to do a better job. If I could be pointed in the general direction that would be great, I dont exactly need to be spoon-fed, although I do like spoons if you catch my drift .

View 2 Replies View Related

Removechild - Create A Drop Down List Which Depend To The Value Selected From The Previous Drop Down List

Jul 28, 2010

I am trying to create a drop down list which depend to the value selected from the previous drop down list. I can add it without problem, but If I change again the value of the first drop down list I would like to remove the previous drop down list generated from the first value. If I try to remove it when I create the element, it even does not create the element, the remove element function seems to work because when you click on the remove link it works.

[Code]...

View 4 Replies View Related

Get The Order Of List Item In An Unordered List?

Feb 17, 2009

I am trying to get the order of list item in an unordered list. Here is the mark up

Code HTML4Strict:
<ul id="list1">
<li>ul1 item 3</li>
<li>ul1 item 2</li>
<li>ul1 item 1</li>
</ul>

[Code]...

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

Mootools Sortable List - Drag An Element From On List To Another But Leave The Original Element ?

Dec 17, 2009

I have some sortable lists.

I need to be able to drag an element from on list to another but leave the original element in its list and have a copy in the new list.

I tried this;

But it treats el and elcone as the same element.

View 3 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

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







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