I am trying to create a web editor. Basically I have a page consisting of a toolbar (draggable divs with background images representing HTML elements) and a drop zone a (large div). Users can create html elements on the page by by dragging a div from toolbar into the drop zone.
If a div from the toolbar is dropped into the drop zone, the markup for the element represented by the background image of that div is created, and a unique ID will be created for it as well. Then they are sent to a web service to be written to the page.
Right now I am facing a big hurdle; I can't make any modifications to the newly created elements. For instance the elements can be given colors when they are dropped but those colors can't be changed afterward. Also I've found that their IDs are the same as the divs from toolbar not the unique IDs that were created for them. Please Help me change the elements colors and add an ID to each of them.
Use jquery-form-builder-plugin Its a nice example to create control and drag drop ..
also you can create modification after draggin a control..
Sample link
You Can Try this as you want
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A Simple Draggable Element</title>
<style>
#drag { width: 300px; height: 300px; background: red; }
</style>
<script type="text/javascript" src="./A Simple Draggable Element_files/jquery.min.js.download"></script>
<script type="text/javascript" src="./A Simple Draggable Element_files/jquery-ui.min.js.download"></script>
<script type="text/javascript">
$( init );
function init() {
$('#drag').draggable();
}
</script>
</head>
<body style="cursor: auto;">
<div class="wideBox">
<h1>Drag-and-Drop with jQuery</h1>
<h2>A Simple Draggable Div</h2>
</div>
<div id="content" style="height: 400px;">
<div id="drag" class="ui-draggable" style="position: relative; left: 124px; top: 23px;"> </div>
</div>
</body></html>
Or also try this one for Drag and Drop
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#div2 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the Tools:</p>
<div id="div1" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<li id="drag1" draggable="true" ondragstart="drag(event)" ><input type="text" id="drag1" width="336" height="69"></li><br/>
<li id="drag2" draggable="true" ondragstart="drag(event)"><input type="text" id="drag2" width="336" height="69"></li>
<div id="div2" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
Related
Well i'm new to html/js scripting but i'm working on a project and i want to using hyperlink to show/hide divs
for example if i click on first hyperlink it should show div id:1 only and if i click on second hyperlink it should show 2nd div only.
i managed to find an example of what i need on internet but i have no idea,why whatever i try it doesnot work for me
an example of what i need - my fiddle
and this is my code
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
so you ned to include JQuery that's what $() is.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
It is Working For me on JSFIDDLE. Add jquery library on your local project.
add This on your Head Tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
you forget to include $ jquery in you script tag
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
You should add jquery in your project.
You can use a CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
OR
you can include your own copy of library in project.
<script src="path/jquery.min.js"></script>
Based on this http://qnimate.com/creating-a-wysiwyg-html-editor/ example created short code
<!doctype html>
<html>
<head>
<title>WYSIWYG Editor</title>
</head>
<body>
<button onclick="displayhtml()">Display HTML</button>
<div class="editor" style="width: 50px; height: 100px; background-color: white; border: 1px solid grey;" contenteditable="true" spellcheck="true">
</div>
<div class="htmloutput">
</div>
<script>
function displayhtml() {
document.getElementsByClassName("htmloutput")[0].textContent = document.getElementsByClassName("editor")[0].innerHTML;
}
</script>
</body>
</html>
On local computer created index file inside wamp/www and pasted the code.
Inside class="editor" typed Enter text Enter. Then clicked on button onclick="displayhtml()"
And i see
<div><br></div><div>text</div><div><br></div>
instead of expected <br>text<br>
Tried here http://jsfiddle.net/24fyrhga/6/
All ok.
Why on local computer i see these divs and how to remove them?
Probably super-basic question, but, why do the text on the first div of the table goes down when raphael creates its paper?
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/raphael-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
raph = new Raphael('canvas_container', 600, 600);
});
</script>
<title>Simple JS Page</title>
</head>
<body>
<br>
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div id="text_container" style="height:600px;width:300px;border: 8px solid #f7f7f7;display:table-cell;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;vertical-align:text-top;">
why am I in the bottom???
</div>
<div id="separator" style="height:600px;width:10px;display:table-cell">
</div>
<div id="canvas_container" style="height:600px;width:600px;border: 8px solid #f7f7f7;display: table-cell;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;">
</div>
</div>
</div>
</body>
</html>
All of the table-imitation css is getting in the way. It looks like you are trying to create two vertical divs, one 300px wide the other 600px wide, with a 10px separator. The same thing can be accomplished using floating, and it plays a little nicer with Raphael.
#text_container, #separator, #canvas_container{
float: left;
}
Fiddle: http://jsfiddle.net/q0aka3s6/
I have made this site/webapp and you can drag the onion out of the white space it's in and onto anywhere on the page but, when you click the button at the left side it disappears when the rest of the div it was/is in. How can I make it not disappear when the user drags it out of the white box?
I used jQuery to make it slide out and in:
$( "#button" ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
and this html to make it work:
<button id="button"><-></button>
<aside class="ingredients" id="toggle">
<section class="center">
<section class="onion" id="draggable"></section>
<section class="butter"></section>
</section>
</aside>
The sections use background images to make them appear:
.onion {
background-image: url(onion.png);
margin: 20px auto -300px auto;
}
.choppedonion {
background-image: url(choppedonion.png);
}
Try this in-built JQuery option for dragging.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draggable </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
find relevant documentation here
I have written a simple code for drag and drop. lets have a look at the code
<!DOCTYPE html>
<html>
<head>
<title>System Drag and Drop Example</title>
<script type="text/javascript">
{
function dragUser(user,oEvent)
{
oEvent.dataTransfer.setData('User',user.id)
}
function dropUser(target,oEvent)
{
var user= oEvent.dataTransfer.getData('User');
alert(user);
alert(target);
target.appendChild(document.getElementById('user'));
oEvent.returnValue=false;
}
}
</script>
</head>
<body>
<p>Try daragging this text to the red box</p>
<p>
<div style="border: 1px solid black; width: 150px; height: 150px">
<img id="img" src="mine,image,life,quote,words,message-5eb746364548d71d07c86e52e63b7b56_h.jpg" width="100px" height="100px" ondragstart="dragUser(this,event)">
</div>
<div id="div2" style="background-color: red; width: 100px; height: 100px; clear: both" ondrop="dropUser(this,event)" ondragenter="return false" ondragover="return false">
</div>
</p>
</body>
</html>
The problem is that when i try to drag the image from the above div to the lower div with id="div2" than my image is not being dropped instead of it it opens in in a tab as an image.
please let me know the reason behind this.