I am using jQueryUI Draggable and Resizable for re-size and drag of a div. It gives me some strange behavior like on re-size it jumps outside of container how can I fix it. Any help should be appreciated.
HTML:-
<div class="paper-area" id="paper_area"></div>
<div class="upload-logo drag">Upload Logo</div>
JS:-
$(".drag").draggable({
containment: ".paper-area",
start: function(e, ui) {
$(this).css({
// position: "relative",
});
},
stop: function(e, ui) {
containment: ".paper-area",
$(this).css({
// position: "relative",
});
},
}).resizable({
containment: ".paper-area",
start: function(e, ui) {
// alert($(".paper-area").width());
containment: ".paper-area",
$(this).css({
// position: "relative",
});
},
stop: function(e, ui) {
containment: ".paper-area",
$(this).css({
//position: "relative",
});
}
});
CSS:-
.paper-area {
border: 1px solid #E4E3E3;
height: 290px;
margin: 48px auto 0;
width: 400px;
}
.upload-logo {
background: none repeat scroll 0 0 #626262;
color: #7B7B7B;
height: 98px;
margin: 0 auto;
text-shadow: 1px 1px 2px #FFFFFF;
width: 99px;
}
JSFiddle
There were two major problems (see updated fiddle: http://jsfiddle.net/BPQQN/7/):
-the containment area did not actually contain the grey rectangle. To fix this, I changed the html to:
<div class="paper-area" id="paper_area">
<div class="upload-logo drag">Upload Logo</div>
</div>
-the grey rectangle jumped around on drag start because it had margin: 0 auto; Deleted the margin and it worked.
The current state of the fiddle is probably not what you were trying to achieve. What should be the final result?
http://jsfiddle.net/BPQQN/8/
html :
<div class="paper-area" id="paper_area">
<div class="upload-logo drag">Upload Logo</div>
</div>
css:
.upload-logo {
position:absolute;
Related
I'm making a dragNdrop web app using JqueryUI. the problem is it's not responsive. Can someone help me with this?
heres my js code
$(document).ready(function() {
$(".draggable").draggable({
helper: "clone",
cursor: 'move'
});
$("#dropzone").droppable({
drop: function (event, ui) {
var canvas = $(this);
if (!ui.draggable.hasClass('object')) {
var canvasElement = ui.helper.clone();
canvasElement.addClass('object');
canvas.find("div").removeClass('activeElement');
canvasElement.addClass('activeElement');
canvasElement.removeClass('draggable ui-draggable ui-draggable-handle ui-draggable-dragging');
canvas.append(canvasElement);
canvasElement.css({
left: (ui.position.left),
top: (ui.position.top),
position: 'absolute',
zIndex: 10
});
canvasElement.draggable({
cursor: 'move',
containment: '#dropzone'
});
}
}
});
im using absolute positioning. how can i make this responsive?
I'm not sure, but I think your issue is with the absolute positioning inside of an element, when that element does not have relative positioning. Consider the following:
<div style="position: relative; width: 200px; height: 200px; background: #ccc;">
<div style="position: absolute; left: 75; top: 90; background: #fff;">Hello World</div>
</div>
The absolute positioning inside of the relative will place the child 75 pixels from the left of the parent, and 90 pixels from the top of the parent. If the parent is not relative, the child would appear 75 picels from the left of the edge of the document and 90 pixels from the top of the document (or the next parent that has relative positioning).
Applying this to your code, you may wish to use something like this: https://jsfiddle.net/Twisty/zzv5gdg2/
HTML
<div id="content">
<div id="element">
<div class="draggable ui-widget-content">
<p>Drag me</p>
</div>
</div>
<div id="dropzone" class="ui-widget-header"></div>
</div>
CSS
.draggable {
width: 90px;
height: 90px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#dropzone {
width: 200px;
height: 200px;
padding: 0.5em;
float: left;
margin: 10px;
position: relative
}
jQuery
$(function() {
$(".draggable").draggable({
helper: "clone",
cursor: 'move'
});
$("#dropzone").droppable({
drop: function(event, ui) {
var canvas = $(this);
if (!ui.draggable.hasClass('object')) {
var canvasElement = ui.helper.clone();
canvasElement.addClass('object');
canvas.find("div").removeClass('activeElement');
canvasElement.addClass('activeElement');
canvasElement.removeClass('draggable ui-draggable ui-draggable-handle ui-draggable-dragging');
canvas.append(canvasElement);
var off = canvas.position();
var canElOff = {
left: ui.position.left - off.left,
top: ui.position.top - off.top
};
canvasElement.css({
left: canElOff.left,
top: canElOff.top,
position: 'absolute',
zIndex: 10
});
canvasElement.draggable({
cursor: 'move',
containment: '#dropzone'
});
}
}
});
});
Again, it's not clear from your post what you are trying to accomplish or what is meant by "responsive". If you'd like, edit your post and provide a better example or further clarity of the issue.
I wanted to drag and drop image onto another image.
I cannot figure it out.. I want to drag icons image, onto droppable briefcase and the icons will stay there.. my codes.. I want the icons image to be onto briefcase image not outside of briefcase image.
Javascript:
$(function() {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
drag: function(event, ui) {
ui.helper.addClass("draggable");
},
stop: function(event, ui) {
ui.helper.removeClass("draggable");
var image = this.src.split("/")[this.src.split("/").length - 1];
if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
alert(image + " dropped.");
} else {
alert(image + " not dropped.");
}
}
});
$("#briefcase").droppable({
drop: function(event, ui) {
if ($("#briefcase img").length == 0) {
$("#briefcase").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase").append(ui.draggable);
}
});
});
HTML:
<div id="dragIcons">
<img src="assets/img/gebiz.png">
<img src="assets/img/b2b.png">
</div>
<div id="briefcase">
<img width="600px" height="auto" src="assets/img/briefcase.svg">
</div>
CSS:
.draggable {
filter: alpha(opacity=100);
opacity: 1.0;
}
.dropped {
position: static !important;
}
#dragIcons {
border: 2px solid #ccc;
padding: 5px;
min-height: 100px;
width: 430px;
}
#briefcase {
border: 5px solid #ccc;
padding: 5px;
height: auto;
width: 600px;
margin-left: auto;
margin-right: auto;
}
Remove the <img> tag in the #briefcase div. Instead, make the background of the div as the image and make its position absolute.
Here's the JSFiddle - you'll have to fix the CSS positioning of the icons, but the main idea is there.
Hello everyone,
I'm building a drop&drag inventory panel for my webgame, but I was unable to make it work with stackable elements. I have simplified the whole inventory so that it's less confusing.
FIrst off, let me explain how do I expect it to work:
Every .item element can be dropped on any free .inv_slot.
If I try to drop an .item element on another .item that does not contain class .stackable, it will simply activate the draggable's revert() function.
if I try to drop the .item element on an .item that does have the .stackable class,
it will only remove the clone/helper. (Later on I will addd an function that only increases the items stack size.)
Now what's wrong with the below example :
in case an .item accidentally dropped on border or between two .inv_slotslots, the Revert animation is not activated. It does work however, while dropping the .item element outside the #panel.
Also if I accidentally dropped an .item between two .inv_slot elements, it will behave as if the .item was dropped on a .stackable item. So it will remove the clone instead of reverting back to it's prev. position. (Most likely an issue with the selector in drop: method)
If I drop a .stackable item over another .stackable item, it does not refresh the cursor. It seems to be stuck in the drag mode which activates the "pointer" cursor.
Now here's the (partialy working) example:
$(document).ready(function() {
//var prev_el = '';
var item_isStackable = "";
$( ".item").draggable({
scroll: true,
revert: function(isValidEl)
{
if(isValidEl)
{
return false;
}else{
return true;
}
},
helper: "clone",
cursor: "pointer",
stack: false,
zIndex: 27,
drag: function(event, ui)
{
item_isStackable = $(this).hasClass("stackable");
},
});
$( ".inv_slot" ).droppable({
accept: ".item",
drop: function( event, ui ) {
var item = $(this).find(".item");
if(item.length == 0) /// See if there any items already in the currently selected inventory slot //
{
console.log("Inserting");
ui.draggable.detach().appendTo($(this)); // if none, insert the item into athe free slot ///
}
else if(item_isStackable == true && item.hasClass("stackable")){
console.log("Increasing ");
ui.draggable.detach(); /// If yes, just destroy the clone ///
}else{
console.log("reverting back");
// in case it's not .inv_slot , revert the item back to it's previous position //
ui.draggable.animate(ui.draggable.data().origPosition,"slow");
}
}
});
});
#panel
{
width: 340px;
height: 44px;
border: 1px solid #000;
padding: 4px;
}
.inv_slot
{
z-index: 22;
position: relative;
width: 40px;
height: 40px;
border: 1px solid red;
float: left;
}
.inv_slot .slot_pos{
z-index: 24;
position: absolute;
margin-left: 50%;
left: -4px; top: 2px;
}
.item
{
position: relative;
z-index: 25;
margin: 4px;
width: 30px;
height: 30px;
border: 1px solid blue;
}
.item.stackable
{
border: 1px solid green;
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="panel">
<div class="inv_slot">
<div class="item stackable" ></div>
<span class="slot_pos">0</span>
</div>
<div class="inv_slot">
<div class="item"> </div>
<span class="slot_pos">1</span>
</div>
<div class="inv_slot">
<div class="item stackable"> </div>
<span class="slot_pos">2</span>
</div>
<div class="inv_slot"><span class="slot_pos">3</span> </div>
<div class="inv_slot"><span class="slot_pos">4</span> </div>
<div class="inv_slot"><span class="slot_pos">5</span> </div>
<div class="inv_slot"><span class="slot_pos">6</span> </div>
<div class="inv_slot"><span class="slot_pos">7</span> </div>
</div>
I have spent couple of hours without any progress , so I'd really appreciate if someone could help me out with this one.
Thanks in advance,
Alex.
What's happening is that when you drag a box onto a border next to it, it deletes itself because it tries to stack itself. You need to change the second part of your if statement:
else if(item_isStackable == true && item.hasClass("stackable") && ui.draggable.filter(function() { var d = this; return item.filter(function() { return d == this; }).length > 0; }).length === 0)
To fix the cursor pointer problem:
.item
{
position: relative;
z-index: 25;
margin: 4px;
width: 30px;
height: 30px;
border: 1px solid blue;
cursor: default !important; /* Add this property. */
}
Fiddle.
I have this simple reveal caption on hover animation using jquery, I am using hover and animate in jquery. Everything is working fine except in one case - when the hovering on image animation is done and the caption is revealed, if the mouse pointer was on the revealed caption the hovering out animation starts, assuming I hovered out of the image ... so i want to check if the mouse pointer is on the image itself or on the caption before applying the hovering out handler.
edited here is the markup
$( ".img-1" ).hover(function() {
$( ".cap-1" )
.animate({ "opacity": "1" }, 100 )
.animate({ "top": "-=50%" }, 200 )
.animate({ "top": "+=10%" }, 200 );
}, function() {
$( ".cap-1" )
.animate({ "top": "+=40%" }, 300 )
.animate({ "opacity": "0" }, 100 );
});
.img-1 {
width: 100%;
height: 400px;
background-color: rgba(0,0,0,0.4);
}
.friends-caption {
position: absolute;
width: 79.5%;
height: 37%;
top: 99%;
bottom: 0px;
left: 20px;
right: 0px;
background-color: rgba(102, 102, 102, 0.7);
border: none;
font-size: 16px;
font-family: inherit;
text-align: center;
color: #fff;
padding-top: 8%;
opacity: 0;
cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-sm-2 col-sm-offset-1">
<img src="images/awn1.jpg" class="img-thumbnail img-1">
<p class="friends-caption cap-1">Costa Cafe</p>
</div>
http://liveweave.com/C8NNC6
http://jsfiddle.net/zwzoresL/
Why not just apply the hover on the container instead of the image?
$('.col-sm-2').hover(function () {
$( ".cap-1" )
.animate({
"opacity": "1",
"top": "-=75%"
}, 300 )
.animate({
"top": "+=25%"
}, 200 );
}, function () {
$( ".cap-1" )
.animate({
"top": "+=50%",
"opacity": "0"
}, 300 );
});
.img-1 {
width: 100%;
height: 50%;
background: rgb(0,0,0);
background: rgba(0,0,0,0.4);
}
.friends-caption {
position: absolute;
height: 25%;
top: 384px;
left: 10%;
right: 10%;
background: rgb(102, 102, 102);
background: rgba(102, 102, 102, 0.7);
border: none;
font: 16px inherit;
text-align: center;
color: #fff;
padding-top: 16px;
cursor: default;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-2 col-sm-offset-1">
<img src="images/awn1.jpg" class="img-thumbnail img-1">
<p class="friends-caption cap-1">Costa Cafe</p>
</div>
The simplest solution to your problem would be to add a pointer-events property to your .friends-caption css rule:
.friends-caption {
/* existing rules */
pointer-events: none;
}
This will prevent mouse events from triggering from the caption element (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).
However, this solution might not have the cross-browser compatibility that you desire. In that case, I think we can do the following to achieve a solution in JavaScript / jQuery:
First, for better organization, let's move the animate steps into their own functions:
var animateIn = function () {
$('.cap-1' )
.animate({ "opacity": "1" }, 100 )
.animate({ "top": "-=50%" }, 200 )
.animate({ "top": "+=10%" }, 200 );
};
var animateOut = function () {
$('.cap-1')
.animate({ "top": "+=40%" }, 300 )
.animate({ "opacity": "0" }, 100 );
};
We can attach the hover event to the .cap-1 element as well as the .img-1 because we want to know when the mouse has entered either element. Next, we need to use a setTimeout in our unhover handler because we want time to track if the mouse has moved from one of our targeted elements to the other -- if it has, we can clear our timeout, cancelling our animateOut call. Lastly, we will need to track whether our caption is in the "in" state so that we don't allow it to animate in when it is aleady in, or out when it is already out (which would cause the caption to repeatedly jump up or down our page):
var hover_timeout;
var caption_is_in;
$('.img-1,.cap-1').hover(function () {
if ('number' === typeof hover_timeout) {
clearTimeout(hover_timeout);
}
if (!caption_is_in) {
caption_is_in = true;
animateIn();
}
}, function () {
hover_timeout = setTimeout(function () {
if (caption_is_in) {
caption_is_in = false;
animateOut();
}
}, 50);
});
I have created a fiddle which can be found at: http://jsfiddle.net/76484/sqyc0b61/.
EDIT:
I have realized that my solution is incomplete because the caption can still trigger the hover event when it is in its "out" state. To fix this, we could add a 'container' class to the element that contains the image and caption and add the following css rule:
.container {
position:relative;
overflow:hidden;
}
Updated fiddle: http://jsfiddle.net/76484/sqyc0b61/1/
I followed the jquery ui draggable and droppable to try to show 3 divs in a specific area.
Here is the code:
--CSS:
#content-1 { width: 200px; height: 100px; border: 1px solid red; display: none; }
#content-2 { width: 200px; height: 100px; border: 1px solid red; display: none; }
#content-3 { width: 200px; height: 100px; border: 1px solid red; display: none; }
--js:
$(function() {
$("#li-1").draggable({
appendTo: "body",
helper: "clone"
});
$(".ui-widget-content").droppable({
drop: function(event, ui) {
$("#content-1").show();
}
});
$("#li-2").draggable({
appendTo: "body",
helper: "clone"
});
$(".ui-widget-content").droppable({
drop: function(event, ui) {
$("#content-2").show();
}
});
$("#li-3").draggable({
appendTo: "body",
helper: "clone"
});
$(".ui-widget-content").droppable({
drop: function(event, ui) {
$("#content-3").show();
}
});
});
--HTML:
<div id="products">
<div id="catalog">
<div>
<ul>
<li id="li-1">dashboard-1</li>
<li id="li-2">dashboard2</li>
<li id="li-3">dashboard3</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<div class="ui-widget-content">
<div id="content-1"></div>
<div id="content-2"></div>
<div id="content-3"></div>
</div>
</div>
The result is it just can show only one div. What is the bug in this code?
Thanks in advance!
I took the nuisance of putting your code into http://jsbin.com to see what's happening out there. Next time please care to do it yourself.
Your problem is that you're defining the same function .droppable to the same element .ui-widget-content. So naturally you're rewriting the definition of the same function three times and only the last definition is working.
Here's how you want it to be done:
$(function() {
$("#li-1").draggable({
appendTo: "body",
helper: "clone"
});
$("#li-2").draggable({
appendTo: "body",
helper: "clone"
});
$("#li-3").draggable({
appendTo: "body",
helper: "clone"
});
$(".ui-widget-content").droppable({
drop: function(event, ui) {
// Retrieving the id of the element being dragged
var element = ui.draggable.attr('id');
if (element == "li-1") {
$("#content-1").show();
} else if (element == "li-2") {
$("#content-2").show();
} else if (element == "li-3") {
$("#content-3").show();
}
}
});
});
Demo: http://jsbin.com/ozixur/3/edit