I am trying to make a form building tool. Everything was working just fine. I was able to drag my first icon and drop it on the main form body, just fine. When I do this, it appends a new div of class panel. I make panel droppable as well, however when I try to drop something on it nothing happens. If I hard code the div in it works fine, however when I append the div it does not. I'm having a lot of trouble figuring this out.
Here's my code:
<html>
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<style type="text/css">
#toolbox
{
width: 100%;
height: 200px;
position: fixed;
top: 0;
left: 0;
background-color: #666666;
z-index: 2;
}
.icon
{
padding-top: 20px;
padding-left: 20px;
text-align: center;
display: table-cell;
}
#formbuilder
{
width: 100%;
position: absolute;
top: 200px;
left: 0px;
bottom: 0px;
padding-top: 5%;
background-color: orange;
opacity: 0.4;
overflow: visible;
}
.panel
{
margin: 0 auto;
margin-bottom: 20px;
height: 150px;
width: 150px;
background-color: blue;
opacity: 0.4;
}
</style>
</head>
<body>
<script type="text/javascript">
function formDropHandler(event, ui)
{
if(ui.draggable.hasClass("pan"))
{
var form = $("#formbuilder");
form.append('<div class="panel ui-droppable"></div>');
$(".panel").droppable({
drop: panelDropHandler
});
}
}
function panelDropHandler(event, ui)
{
if(ui.draggable.hasClass("tab")) alert("TRUE");
}
$(document).ready(function() {
var icons = $('.icon');
$('.icon').draggable({
cursor: 'move',
helper: 'clone',
revert: true
});
$("#formbuilder").droppable({
drop: formDropHandler
});
$(".panel").live('mouseover',function(){
$(".panel").droppable({
drop: panelDropHandler
});
});
});
</script>
<div id="toolbox">
<div class="icon pan">Panel<br /><img src="panel.png" alt="PANEL.PNG" /></div>
<div class="icon tab">Table<br /><img src="table.png" alt="TABLE.PNG" /></div>
</div>
<div id="formbuilder">
<div class="panel"></div>
<div class="panel"></div>
</div>
</body>
</html>
Try this. Both drops are working now. The panel drops on the form builder and the table drops on the panels, (even the newly created ones). Just remember that the formbuilder is only the area that is colored in under the toolbar section. So the further you go down you won't be able to drop anything unless you scroll back up. But that's just a simple matter of CSS, change the position:absolute to position:relative and it should grow with the panels.
function formDropHandler(event, ui) {
if (ui.draggable.hasClass("pan")) {
var form = $("#formbuilder");
form.append('<div class="panel ui-droppable"></div>');
} else if (ui.draggable.hasClass("tab")){
alert("TRUE");
}
}
$(document).ready(function() {
var icons = $('.icon');
$('.icon').draggable({
cursor: 'move',
helper: 'clone',
revert: true
});
$("#formbuilder").live('mouseover', function() {
$("#formbuilder").droppable({
drop: formDropHandler
});
});
$(".panel").live('mouseover', function() {
$(".panel").droppable({
drop: formDropHandler
});
});
});
Only those elements which are existing when you called .droppable() were made "dropables". Since you ran it once, at doc ready, then never again, any elements which are added to the page after-the-fact are just run-of-the-mill elements.
You will need to initialise each new addition. You can do this quickly by turning around your append statement.
var form = $("#formbuilder");
$('<div class="panel ui-droppable"></div>')
.appendTo(form)
.droppable({drop:panelDropHandler});
Related
I'm a pretty new coder, going through a course for javascript and jquery. I stopped to play around with drag and drop features in jquery, and have gotten stumped on something.
Codepen - http://codepen.io/Allayna-1472610667/pen/ozvqNd
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
div {
margin:auto;
}
#bigsquare {
width: 400px;
height: 400px;
background-color: aqua;
border:2px solid #ccc;
font-weight: bold;
font-size: 20px;
text-align: center;
padding: 0;
}
#smallsquare {
width: 200px;
height: 200px;
background-color: blue;
color: yellow;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div id="bigsquare">
<p>Drop here</p>
</div>
<div id="smallsquare">
<p>Drop me in the box</p>
</div>
<script type="text/javascript">
var dropped = false;
$("#bigsquare").droppable( {
drop: function(event,ui) {
$("#smallsquare").draggable("option", "containment", "#bigsquare");
$("#smallsquare").css("background-color","green");
$("#smallsquare").html("I am trapped now!");
$("#bigsquare").css("background-color","red");
$("#bigsquare").html("I have you now! BWAH HA HA!");
dropped = true;
}
});
$( "#smallsquare" ).draggable({
drag: function (event, ui) {
if(dropped == false) {
$("#smallsquare").html("Don't let me get trapped!");
}
}
});
</script>
</body>
</html>
This code without any margins or with floats, it works perfectly as it should: the little box can be dragged freely until dropped in the big one, then it is trapped in the big one.
But if I dare apply the "margin:auto" to my divs to center my divs, the little box jumps outside the box that should be constraining it.
I have been able to open a page and drag items onto the surface div tags onto the surface. I have also been able to move the items and resize them.
Now, I am trying to load the same objects onto the surface when the page loads and still have the capability to move them, resize or remove the cloned them
I was able to add the object to the page, however, when i move the objects they revert to the original position and i am unable to resize the cloned object.
Below is my code, can somebody please tell me where i may be going wrong with my implementation?
$(document).ready(function (event, ui) {
if ($('#rlvPdf_ctrl0_pnlPdfPage').length) {
var clonedObject = $("#textbox").clone();
clonedObject.addClass("dropped");
//$(function () {
//Make element draggable
clonedObject.draggable({ revert: false});
$("#rlvPdf_ctrl0_pnlPdfPage").droppable({
accept: 'textbox',
drop: function (event, ui) {
$(this).append($(ui.draggable).clone());
$("#rlvPdf_ctrl0_pnlPdfPage.clonedObject").addClass("dropped");
}
});
clonedObject.appendTo("#rlvPdf_ctrl0_pnlPdfPage");
}
HTML
<div id="toolbar" class="toolbar">
<div id="textbox" class="draggableItem">
<span class="draghandle">::</span>
<span class="draggableItemContentText">Text Box</span>
</div>
</div>
<div id="rlvPdf_ctrl0_pnlPdfPage" pageNum="1" >
CSS
.dropped
{
position: absolute !important;
display: inline-block;
margin: 0 auto;
background-color: wheat;
}
.draggableItem
{
position: relative;
height: 18px;
width: 150px;
z-index: 1000;
box-shadow: 0px 2px 2px black;
display: inline-block;
}
I don't have much experience with jQuery.
I have 4 li elements and a draggable block. When I drag from green to blue, first I need my dragging block to stand behind blue and not go out from the borders of the container, meaning that my draggable element must be always snap into the container.
When my draggable element stand behind blue, the background color must be changed from brown to red.
Can anybody help me? Because I don't really know how to do this. All what I have at this moment is: JSFiddle
HTML
<div id="container" class="ui-widget-header">
<div id="draggable" class="ui-widget-content"></div>
<ul id="menu">
<li id="menuElement1"></li>
<li id="menuElement2"></li>
<li id="menuElement3"></li>
<li id="menuElement4"></li>
</ul>
</div>
CSS
body {
background-color: brown;
}
#container {
position: relative;
}
#menu,
#draggable {
position: absolute;
top: 0;
left: 0;
}
#draggable {
width: 100px;
height: 150px;
}
#menu {
margin-left: -40px;
}
ul li {
display: block;
float: left;
padding: 50px;
}
#menuElement1 {
background-color: green;
}
#menuElement2 {
background-color: blue;
}
#menuElement3 {
background-color: black;
}
#menuElement4 {
background-color: red;
}
#container {
height: 150px;
width: 100%;
background-color: gray;
JQuery
$(function() {
$( "#draggable" ).draggable({ snap: ".ui-widget-header" });
});
Here's an updated fiddle
You'd do well to read this article on Droppable from the jQuery docs. Basically you were half way there, you need to make an element (the blue box, with id #menuElement2) droppable to provide a target for a draggable element
$('#menuElement2').droppable({
drop: function( event, ui ) {
//Do something here...
}
});
Within the drop function (this fired when the block is dropped on the target) you need to perform your action.
$('body').css({'background-color': 'red'});
This adds a custom css rule to the body that changes the colour, again check out the jQuery docs - search for 'jQuery css'.
Hope this helps :)
Update: I just updated the fiddle again to make it revert back to brown when you change selection - not sure if you wanted this but it can be easily removed by commenting out the css change within the drag function.
If I add elements to list after I initialize .sortable it doesn't work correctly.
See example jsFiddle
Sample HTML:
<div class="container">
</div>
<br />
<button class="add-fields">add</button>
Sample JS:
$(".container").sortable({
containment: 'parent'
});
$(".container").disableSelection();
$(".add-fields").click(function(){
$(".container").append("<div>sucke</div>")
})
Sample CSS:
.container {
height: 30px;
width: 100%;
background: blue;
position: relative;
float: left;
}
.container > div {
position: relative;
float: left;
height: 100%;
width: 80px;
background-color: red;
line-height: 30px;
text-align: center;
margin: 0;
padding: 0;
cursor: default;
}
UPDATE
I found related issue here http://bugs.jqueryui.com/ticket/7498
because this.floating is only determined in _create, if you start with
an empty sortable it is assumed to be vertical.
The workaround for that jQueryUI bug is to initialize the sortable with an element inside, then remove it immediately after initialization.
HTML:
<div class="container"><div id="test">blah</div>
</div>
<br />
<button class="add-fields">add</button>
Javascript:
var i = 0;
$(".container").sortable({
containment: 'parent'
});
$(".container").disableSelection();
$("#test").remove();
$(".add-fields").click(function(){
$(".container").append("<div>sucke" + (i++) + "</div>")
})
And a jsFiddle showing it working.
Its working fine for me.. Try unique names for the category divs...
$(".container").sortable({
containment: 'parent'
});
$(".container").disableSelection();
$(".add-fields").click(function(){
$(".container").append("<div>sucke"+Math.round(Math.random()* 100)+"</div>")
})
http://jsfiddle.net/NQMPr/23/
update.. my bad. in the above example I did have one element inside the container. When I start it from empty, you are right, the div's don't sort. Apologies...
this is my code :
<style type="text/css">
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;
border:1px solid #DDDDDD;
color:#333333;
background:#F2F2F2;
}
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;
border:1px solid #E78F08;
color:#FFFFFF;
font-weight:bold;
background:#F6A828;
}
#droppable.highlight{
background:#FFE45C;
}
</style>
<div class="demo" style="margin-left:35%;margin-top:10%;cursor:pointer;">
<div id="draggable">
<p>Drag me to my target</p>
</div>
<div id="droppable" >
<p>Drop here</p>
</div>
</div><!-- End demo -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8rc3.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this).addClass('highlight').find('p').html('Dropped!');
$(this).append(ui.draggable.draggable( "destroy" ))
}
});
});
i want to drag a div into another one
and when i drag stoped , it show :
this is not seem to "into" the droppable div ,
because the draggable div be added some css style automatically when use ".draggable()"
element.style {
left:133px;
position:relative;
top:38px;
}
i can clean the css , but does jquery-ui has a method to do this ?
Not quite sure what you want to accomplish - a bit more details would help but here is a shot...
So here is an example that 'inserts' the drag into the drop - the css is applied to the helper not the element.
$("#draggable").draggable({
revert: 'invalid',
helper: 'clone',
zIndex: 350,
start: function() { $(this).toggle(); },
stop: function() { $(this).toggle(); }
});
$("#droppable").droppable({
accept: '#draggable',
drop: function(event, ui) {
$(this).addClass('highlight').find('p').html('Dropped!');
$(ui.draggable).draggable("destroy").appendTo($(this));
}
});
edit -
Dived into this a bit deeper, and the reason my posted code works as opposed to the question's is because of the "helper:clone" option in the draggable. When a helper is used, it applies the left/top css to the helper, not to the actual element we are dragging.
The start/stop toggles in the draggable make the original element disappear, but turns it back on when its dropped - to simulate the default visual of $().draggable().
Also, I would be careful of the floats you have in your css - that may also give odd results.