473,320 Members | 1,900 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

drag and drop html content with js ????

I have searched the forum and couldnt find the post similar to mine so I created a new one.

here what I would like to do:



on the right hand side a have a list of things that I might want to add to the page.
They appear as a small rectangle with a name so that user would know what it is. When you will drag an drop it to the main body, the small rectangle will change into a big one with more details and if needed will accept text from the user. Similarely if the user does not need that module he can drag and drop back into selection rectangle. At the same time in the background when nothing was dragged and dropped would look something like this in html:
[HTML]
<html>
<body>
<div>
</div>
</body>
</html>
[/HTML]

for example when the user will drag and drop the title box, the the following code will be inserted->
[HTML]
<html>
<body>
<div>
Title<br/><input type="text" name="title"/>
</div>
</body>
</html>
[/HTML]

and if the user will decide to remove title from the main body, the html code should be removed too at the same time.

I have seen bunch of drag and drop scripts, but I have not seen any to do what I would like to do.

** also I would like to have to the ability to have sertain element be already added to the main body, which user cant remove. for example required fields.

thx..
Oct 17 '07 #1
3 2550
gits
5,390 Expert Mod 4TB
hi ...

have a look at the following demo of a shopping cart with the use of mootools:

draggable shopping cart

use such a library/framework for your task or make an attempt and post some code here ... nobody will write the entire code for you ... but we will be glad to help you with any particular problem you would have with your own written code ...

kind regards
Oct 17 '07 #2
I have tryed the code, but it doesnt work for me:

here is my test page:

http://adventus-test.org/alex/drag.htm

the pictures just wont drag????
Oct 17 '07 #3
pronerd
392 Expert 256MB
the pictures just wont drag????
FireBug shows the error below on that page.

$ is not defined
[Break on this error] var drop = $('cart');


I am not sure I follow what you want to do clearly.

It sounds like you want to drag a text layer over a differnt text input field and have the text string in the layer that was dragged be added to the text input filed. Is that what you want?

If so you need to do the follwoing.
1. Make the text layers dragable.
2. Add an onmouseover event to the text input field that will set a value to show the mouse is over the text field.
3. Add an onmouseout event to remove the value used to show the mouse is over the text feild.
4. Add some logic that will test the variable from the onmouseover and onmouseout events to see if they droped the layer on the text field.
5. If they did drop the layer on the text field then take the value from the text layer and either over write the current text input feild or add it to it.
Oct 17 '07 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: srikanth | last post by:
Hi all, I have an requirement in one of my projects. We have one aspx page, in that we have two frames, in each frame having a tree structure control(dynamic data). In the left Frame we are...
9
by: Wang, Jay | last post by:
Hello, all, I would like to enable some text between <SPAN url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN>. I put some javascript and it will extract http://www.testserver.com/ from...
1
by: Ryan Stewart | last post by:
If you don't want to read this post because of its length, I understand. I've spent two and a half days on this problem and have a good deal of information to relate. And this is kind of a long...
5
by: Clyde | last post by:
I am trying to implement the user feedback provided by Windows Explorer when draggng a filename from one place to another. I have the drag and drop action worked out but have had no luck in...
6
by: jojobar | last post by:
Hello, I look at the asp.net 2.0 web parts tutorial on the asp.net web site. I tried to run it under firefox browser but it did not run. If I want to use this feature in a commercial product...
3
by: Goldwind | last post by:
Hi, I"m trying to use drag & drop of text from one text box to another but without suceess. Microsoft presented an example in "101 code samples" BUT in this example the code select and drag all...
14
by: maya | last post by:
I need a drag-n-drop script.. I have found one here.. http://javascript.internet.com/page-details/drag-n-drop.html each div containing an image has an id, and each image has a name, as in ...
8
by: ericgorr | last post by:
I have the following test page: http://ericgorr.net/test.html <html> <head><title>Simple JavaScript</title></head> <BODY ondragstart="alert(event.srcElement.tagName)"> <INPUT TYPE=text...
5
by: Romulo NF | last post by:
Greetings, I´m back here to show the new version of the drag & drop table columns (original script ). I´ve found some issues with the old script, specially when trying to use 2 tables with...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.