Forum Moderators: open
Is there any way using this code to generate a new Content Box with the text input everytime the onClick is called? It's so I can control each text input separately. I'd really appreciate any help.
<style type="text/css">
.contentBox{
background-color:#B9CDED;
width: 100px;
text-align: center;
height: 50px;
}
</style><script type="text/javascript">
function compose(from, to){
var from=typeof from=='object'? from : document.getElementById(from);
var to=typeof to=='object'? to : document.getElementById(to);
to.innerHTML=from.value;
}
</script>
<input type="text" id="from">
<input type="button" onClick="compose('from', 'to');" value="Compose">
<div class="contentBox" id="to"> </div>
[edited by: HighPriestess at 7:29 pm (utc) on June 2, 2008]
<script>
window.onload = function(){
document.getElementById("butt").onclick=function(){
var c = document.getElementById("content");
var newone = document.createElement("div");
newone.innerHTML = document.getElementById("inputvar").value;
c.appendChild(newone);
}
}
</script><input type="text" value="test" id="inputvar"/><input type="button" id="butt" value="insert"/>
<div id="content"></div>
<script>
window.onload = function(){
document.getElementById("butt").onclick=function(){
var c = document.getElementById("content");
var newone = document.createElement("input");
newone.type="text"
c.appendChild(newone);
}
}
</script><input type="button" id="butt" value="insert"/>
<div id="content"></div>
<html><style type="text/css">
.drag{
position:relative;
cursor:move;
z-index: 100;
background-color:#B9CDED;
width: 100px;
text-align: center;
font-weight: bold;
height: 50px;
}
</style><script type="text/javascript">
/***********************************************
* Drag and Drop Script: © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit (www.dynamicdrive.com) for this script and 100s more.
***********************************************/var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}dragobject.initialize()
</script><script type="text/javascript">
function compose(from, to){
var from=typeof from=='object'? from : document.getElementById(from);
var to=typeof to=='object'? to : document.getElementById(to);
to.innerHTML=from.value;
}
</script>
</head><body>
<input type="text" id="from">
<input type="button" onClick="compose('from', 'to');" value="Compose">
<div class="drag" id="to"></div>
</body></html>
[edited by: HighPriestess at 7:52 am (utc) on June 3, 2008]
...
<script type="text/javascript">
function compose(from, to){...omitted for brevity...}
[red]
function create(){
var newdiv = document.createElement('div');
newdiv.className = 'drag';
document.body.appendChild(newdiv);
}[/red]
</script>
</head>
<body>
<input type="text" id="from">
<input type="button" onClick="compose('from', 'to');" value="Compose">
<div class="drag" id="to"></div>
[red]<input type="button" value="create a new draggable thing" onclick="create();" />[/red]
</body>
</html>
The way your draggables script works, any element on the page with the class "drag" is made draggable, with no initialization or extra code needed. Indeed, check out this sample (this time, quoted in full)
<html>
<style type="text/css">
.drag{
position:relative;
cursor:move;
}
div.drag{
z-index: 100;
background-color:#B9CDED;
width: 100px;
text-align: center;
font-weight: bold;
height: 50px;
}
</style><script type="text/javascript">
/***********************************************
* Drag and Drop Script: © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit (www.dynamicdrive.com) for this script and 100s more.
***********************************************/var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1;
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}dragobject.initialize()
</script><script type="text/javascript">
function compose(from, to){
var from=typeof from=='object'? from : document.getElementById(from);
var to=typeof to=='object'? to : document.getElementById(to);
to.innerHTML=from.value;
}
function create(elemtype){
if(elemtype=='div'){var newdiv = document.createElement('div');}
if(elemtype=='textarea'){var newdiv = document.createElement('textarea');}
if(elemtype=='input'){var newdiv = document.createElement('input');newdiv.type='text';}
if(elemtype=='button'){var newdiv = document.createElement('input');newdiv.type='button';newdiv.value='button';}newdiv.className = 'drag';
document.body.appendChild(newdiv);
}</script>
</head><body>
<input type="text" id="from">
<input type="button" onClick="compose('from', 'to');" value="Compose">
<div class="drag" id="to"></div><input type="button" value="draggable div" onclick="create('div');" />
<input type="button" value="draggable textarea" onclick="create('textarea');" />
<input type="button" value="draggable input" onclick="create('input');" />
<input type="button" value="draggable button" onclick="create('button');" /></body>
</html>
<script type="text/javascript">
function compose(from, to){
var from=typeof from=='object'? from : document.getElementById(from);
var to=typeof to=='object'? to : document.getElementById(to);
to.innerHTML += '<br>' + from.value;
}
</script><input type="text" id="from">
<input type="button" onClick="compose('from', 'to');" value="Compose">
<p id="to"></p>
Now everytime text is entered it appears on a new line. All I want to do is make each new line of text draggable. So similar to your code above but the div somehow including the text.
Thanks for your patience.
