By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,247 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

drag and drop html content with js ????

P: 2
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
Share this Question
Share on Google+
3 Replies


gits
Expert Mod 5K+
P: 5,390
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

P: 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

Expert 100+
P: 392
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

Post your reply

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