473,699 Members | 2,628 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

drag and drop html content with js ????

2 New Member
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 2567
gits
5,390 Recognized Expert Moderator Expert
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
darksniperx
2 New Member
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 Recognized Expert Contributor
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
4165
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 displaying all the documentcollections(dynamic) in the Treestructure, In the Right side we are displaying all the HolderGroups (dynamic).We have to assing Any one of the Documentcollections to HolderGroups, through Drag and Drop
9
6816
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 the the span element when I select the whole text in the SPAN and drag it. However, I want to drag it without have to select the words between the span element. The default mouse action will only select the words when i move the mouse. Can...
1
4964
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 shot, but I'm just hoping someone here has experienced a similar problem and has a better idea of what's going on than I do. First, I've tested this in IE 6.0, Netscape 7.2, Mozilla 1.75, and Firefox 1.0. It works fine in IE (even though I was...
5
4966
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 finding how to capture the piece of the screen into a bitmap to simulate the movement. I know this could be done with the Windows API but can't find any way to do it with .Net functions. Any help is appreciated.
6
3550
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 where the user can run on firefox/mozilla, what would be a good approach. 1. Should I overwrite the javascript code drag-and-drop to make it more browser independent. If I want to go this route, can anybody provide me a
3
3880
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 the text in the TextBox, wether the user wants or not. I need to drag only the selected text (changing the example causes it not to work).
14
3099
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 <div id="h" style="position:absolute;left:100;top:350;"> <img src=http://javascript.internet.com/img/cards/hearts.gif name="h"> </div> but I don't see where he references these id's and names in the JS code..
8
4550
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 VALUE="Select and drag this text"> <SPAN >Select and drag this text</SPAN> <TEXTAREA>Select and drag this text</TEXTAREA>
5
13781
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 drag&drop on the same page (which was not possible). Now i´ve a new concept of the script, more object oriented. I´ve also commented the whole code so you guys can easier understand it engine. What exactly we need when trying to make a column drag &...
0
8685
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9172
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9032
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
7745
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6532
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5869
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4374
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4626
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
2008
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.