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;
}
Related
I don't know why suddenly the sidebar moves unintentionally. I'm creating a fixed sidebar that show only when hovered.
When I slowly point the mouse on the parent div #containter element it works fine, but when I move the mouse several times on the parent div element #containter the div shows and hide like insane. And also there an area where the parent div shows even you didn't actually hovered on the parent div.
I'm using this code.
HTML
<div id="containter"><!-- parent div -->
<div class="wrapdownload">
</div>
<div class="wrapdownload">
</div>
<div class="wrapdownload">
</div>
</div>
CSS
#containter {
width: 140px;
height: 282px;
position: fixed;
margin-top: 30px;
left: -104px;
border: 1px solid red;
}
.wrapdownload {
width: 100px;
height: 90px;
border: 2px solid black;
}
JAVASCRIPT
$(document).ready(function() {
$("#containter").mouseenter(function(event) {
$("#containter").animate({
left: "1px"
});
});
$("#containter").mouseleave(function(event) {
$("#containter").animate({
left: "-104px"
});
});
});
When you hover on the parent div for six times the div show 6 times also. I just want it to show when the mouse is pointed on div element and if i move the mouse outside the parent div, it must hide.
Here is the sample on jsfiddle https://jsfiddle.net/py0622ms/6/
Use stop() method:
$(document).ready(function() {
$("#containter").mouseenter(function(event) {
$("#containter").stop().animate({
left: "1px"
});
});
$("#containter").mouseleave(function(event) {
$("#containter").stop().animate({
left: "-104px"
});
});
});
Working fiddle:
https://jsfiddle.net/py0622ms/7/
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.
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});
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.
I want to enable drag-and-drop behaviour on my Web application. I have an image I want to drag. The image is behind another one that has transparent sections so that you can see the image beneath it. I do not want to change the order of the images. My thinking is I should use another layer on top of both images that is transparent and use it as a proxy to transfer events to the image I want to drag. jQuery UI's draggable function will not allow me to transfer the events in real-time i.e. I cannot hook into what it is doing while the drag is taking place, only when it is completed.
Is there a JavaScript library or jQuery plugin that will allow me to enable drag-and-drop on an element and have it transfer those events to another element in real-time?
Maybe I don't understand what you are trying to accomplish, but you should be able to drag and drop overlapping images without any trouble (demo).
Just wrap both images in a div and then make the div draggable:
CSS (no need to make .dragme position relative, because it is done in the draggable script)
.dragme img {
position: absolute;
top: 0;
left: 0;
}
HTML
<div class="dragme">
<img src="image1.gif">
<img src="image2.gif">
</div>
Script
$(".dragme").draggable();
I updated the demo, this isn't pretty and there might be a better way, but basically this puts an invisible overlay over the frame, then positions the image while the overlay is being dragged.
CSS
#draggable, #droppable {
width: 450px;
height: 250px;
padding: 0.5em;
margin: 10px;
background: #ddd;
color:#000;
}
.dragme {
position: relative;
width: 100px;
padding: 5px;
}
.dragme img {
position: absolute;
top: 55px;
left: 30px;
}
.demo {
width: 500px;
}
.border {
position: absolute;
top: 75px;
left: 30px;
z-index: 1;
}
HTML
<div class="demo">
<div class="border">
<img src="http://www.imageuploading.net/image/thumbs/large/border-564.png">
</div>
<div id="draggable" class="ui-widget-content">
<p>Drag from here</p>
<div class="dragme">
<img src="http://i142.photobucket.com/albums/r117/SaltyDonut/Icons/evilpuppy.gif">
</div>
</div>
<div id="droppable">
<p>Drop here</p>
</div>
</div>
Script (The demo uses $(document).ready because jsFiddle doesn't like $(window).load)
$(window).load(function(){
// cycle through draggable divs (in case there are more than one)
$(".dragme").each(function(){
var img = $(this).find('img');
var pos = img.position();
// create div overlay on image
$('<div/>', {
class : 'overlay',
css: {
position: 'relative',
top: pos.top,
left: pos.left,
width: img.outerWidth(),
height: img.outerHeight(),
zIndex: 100
}
})
// save original image position
.data('pos', [pos.left, pos.top])
.appendTo($(this));
// make overlay draggable
$(this).find('.overlay').draggable({
containment : '.demo',
revert: true,
revertDuration: 0,
handle: 'div',
// drag overlay and image
drag: function(e,ui){
img = $(this).parent().find('img');
img.css({
top: ui.position.top,
left: ui.position.left
});
},
// make image revert
stop: function(e,ui){
pos = $(this).data('pos');
$(this).parent().find('img').animate({left: pos[0], top: pos[1] },500);
}
});
});
$("#droppable").droppable({
drop : function(e,ui) {
// append entire div wrapper (.dragme)
ui.helper.parent().appendTo($(this));
}
});
});