Moving Objects (Not sure if this goes here)

Stormraven · #1 May 11th, 2008, 19:53

Sorry if this is not the right place to post this but, but on the www.bbc.co.uk website if you put your mouse over the topic titles it allows you to move them about and im assuming it stores a cookie to tell where its been moves to how can i do that too? im not sure how to code it, im assuming its PHP i think

does anyone know of a code or can someone help me achieve this please?

By the way at the moment im using Xampp >.<

CloudedVision · #2 May 11th, 2008, 20:18

Moved to the Javascript Forum

You'll need javascript for this. (PHP mixed in to store where the object was dragged to.) Javascript libraries such as MooTools and JQuery that have drag-and-drop built in.

Stormraven · #3 May 11th, 2008, 20:34

It says page not found >.<

CloudedVision · #4 May 11th, 2008, 20:38

oops

http://www.mootools.net/ http://www.jquery.com/

Stormraven · #5 May 11th, 2008, 20:48

I cant see anything on those pages that move things around though mate

CloudedVision · #6 May 11th, 2008, 21:26

You gotta look harder

http://demos.mootools.net/DragDrop

http://docs.jquery.com/UI/Droppables

Stormraven · #7 May 11th, 2008, 21:42

Right im testing this code in xampp:

Code: Select all

<html>
<head>
<title>Script test</title>
</head>

<body>
<h3>Group waits till all Ajax requests are done.</h3>
<a id="req-start" href="#">Start Requests</a>
<dl id="req-states">
    <dt>Request #1:</dt>
    <dd id="req-state-1">-</dd>
    <dt>Request #2:</dt>
    <dd id="req-state-2">-</dd>
    <dt>Request #3:</dt>
    <dd id="req-state-3">-</dd>
    <dt>Request #4:</dt>
    <dd id="req-state-4">-</dd>
    <dt>Request #5:</dt>
    <dd id="req-state-5">-</dd>
    <dt>Request #6:</dt>
    <dd id="req-state-6">-</dd>
    <dt><strong>OVERALL:</strong></dt>
    <dd id="req-state-all">-</dd>
</dl>

<script type="text/css">
#req-states dt
{
    width: 100px;
    float: left;
}
#req-states dd
{
    padding-left: 20px;
    margin-left: 20px;
}
#req-states dd.ajax-loading
{
    margin-left: 80px;
    background:    url(http://demos.mootools.net/demos/Group/spinner.gif) no-repeat 0 0;
}
 
.tool-tip {
    color: #444;
    background-color: #eee;
    width: 300px;
    z-index: 13000;
}
 
.tool-title {
    font-weight: bold;
    font-size: 11px;
    margin: 0;
    color: #222;
    padding: 8px 8px 4px;
}
 
.tool-text {
    font-size: 11px;
    padding: 4px 8px 8px;
}
</script> 

<script type="text/javascript">
<!--
var url = 'http://demos.mootools.net/demos/Group/lipsum.html?antiCache=';
var id = 0;
var tips = new Tips();
 
/**
 * reqState is a custom option, onRequest/onComplete can handle
 * it like a property. Its used here to take track of the element
 * for the specific Ajax requests.
 * 
 * We define options here because it saves code and all
 * Ajax instances have the same options. We also add a Tips::build
 * to show the responseText
 */
 
var options = {
    method: 'get',
    onRequest: function(){
        this.options.reqState
            .addClass('ajax-loading')
            .setHTML('Request ...');
    },
    onComplete: function(resp){
        this.options.reqState
            .removeClass('ajax-loading')
            .setProperty('title', 'Response: :: ' + resp)
            .setHTML('Complete!');
        tips.build(this.options.reqState);
 
    }
};
 
/**
 * a for loop here would be easier, but its better that way so you can
 * see whats in xhrs: 6 Ajax instances
 * 
 * The id is appended as url-parameter to prevent caching.
 */
var xhrs = [
    new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
    new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
    new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
    new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
    new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
    new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options))
];
 
/**
 * The group, it has one Event that waits for all Ajax instances to finish
 * it: onComplete. When all requests are complete this onComplete is fired.
 */
var group = new Group(xhrs[0], xhrs[1], xhrs[2], xhrs[3], xhrs[4], xhrs[5]);
 
group
    .addEvent('onRequest', function() {
        $('req-state-all')
            .addClass('ajax-loading')
            .setHTML('All Requests started ...');
    }).
    addEvent('onComplete', function() {
        $('req-state-all')
            .removeClass('ajax-loading')
            .setHTML('All Completed!');
    });
 
/**
 * The last thing, the event which starts the request.
 */
$('req-start').addEvent('click', function(e) {
    new Event(e).stop();
 
    xhrs.each(function(xhr){
        xhr.url = url + $random(100, 999);
        xhr.request();
    });
});
//-->
</script>
</body>
</html>

im saving it as a .html and puttin it in htdocs but its not working how come

CloudedVision · #8 May 11th, 2008, 21:51

First off, please don't just post the entire code, nobody is going to want to read through it. Just post the problematic parts.

The thing thats causing you trouble is that you don't include the mootools library. The browser won't know what any of the classes and functions are.

Stormraven · #9 May 11th, 2008, 21:56

How do i add the mootools library to that? im sorry about posting the whole code

CloudedVision · #10 May 11th, 2008, 21:59

http://mootools.net/download

then use

HTML: Select all

<script type="text/javascript" src="dir/dir/mootools.js"></script>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
how to move the objects in HTML?	virenparmar	Website Planning	1	Jun 2nd, 2008 08:47
Removing objects in an array	breepupetstofight	ASP.NET Forum	0	Sep 17th, 2007 13:00
Sending objects to the client	QuikFrozen	ASP.NET Forum	5	Apr 18th, 2007 14:20
Internet Explorer & objects... HELP!	brittny	Web Page Design	7	Jul 6th, 2005 23:29
revolving objects	benji	Flash & Multimedia Forum	5	Sep 9th, 2003 11:56

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Moving Objects (Not sure if this goes here)