jQuery draggable with position conditionals - javascript

Trying to figure out how to be able to drag the red square ONLY AFTER the blue square has been dragged to the other end of its parent.
Also wondering if it is possible (in a separate scenario) to have the red square mirror the blue square when the blue square is dragged.
https://jsfiddle.net/t167y2ga/14/
$(function() {
$("#draggable_left").draggable({
containment: "parent",
});
});
$(function() {
$("#draggable_right").draggable({
containment: "parent",
});
});

You can use stop event:
stop:function(ev,ui){
if(ui.position.left === 150) {
$("#draggable_right").draggable({
containment: "parent",
});
}
Something like this will do the first part:
Fiddle

To achieve your first goal
be able to drag the red square ONLY AFTER the blue square has been
dragged to the other end of its parent
You just need to apply the draggable to the html element after the stop event is fired from the first draggable element. Sample code is:
$(function() {
$("#draggable_left").draggable({
containment: "parent",
stop: function(e, ui) {
$("#draggable_right").draggable({
containment: "parent",
});
},
});
});
See the JSFiddle working example here
EDIT: In case you want to disable the draggable when blue element is not in the right side, see this other JSFiddle

Related

jQuery draggable bug (element not in line with cursor)

EDIT: JSFIDDLE: http://jsfiddle.net/h9yzsqfr/
--
Code:
elem.editor.find("div.ui-widget").draggable(
{
handle:"div.content",
containment:elem.editor,
snap:"*",
start: function(e,ui)
{
$(ui.helper).addClass("dragging");
},
drag: function(e,ui)
{
checkTop(ui);
if($(ui.helper).parents("div.lo-content").length > 0)
{
$(ui.helper).appendTo(elem.editor);
ui.position = { 'top': e.pageY, 'left': e.pageX };
}
},
stop: function(e,ui)
{
oldWidget.saveState($(ui.helper),1);
setTimeout(function() {
$(ui.helper).removeClass("dragging");
}, 300);
}
});
I have some draggable objects within a container defined by elem.editor; however I have some other draggable objects inside div.lo-content which is also inside elem.editor.
Whenever an object inside div.lo-content is dragged, it should reattach to the elem.editor container which is working fine; however as demonstrated in the following GIF (below), it is not setting the position of the draggable object to where the mouse cursor is.
What is a workaround for this problem?
The problem is your width: 100% and the containment option. As soon as its appended to body it stays 100%, but of the body, then it gets smaller but the containment has already been calculated.
One way to solve it is to reset containment. There are probably different ways to do it, one way could be like this:
start: function (e, ui) {
if ($(this).parents(".inner").length > 0) {
$(ui.helper).addClass("dragging");
ui.helper.css({
'width': '100px',
'left': '0px',
'top': '0px'
});
ui.helper.data()['ui-draggable'].containment = [0,0,$('body').width(), $('body').height()]
ui.helper.appendTo("body");
}
},
http://jsfiddle.net/puurqx8r/6/
connectToSortable 
It's a  Selector that Allows the draggable to be dropped onto the specified sortables. If this option is used, a draggable can be dropped onto a sortable list and then becomes part of it. Note: The helper option must be set to "clone" in order to work flawlessly. Requires the jQuery UI Sortable plugin to be included.
Code examples:
Initialize the draggable with the connectToSortableoption specified:
$( ".selector" ).draggable({
connectToSortable: "#my-sortable"
cursorAt:{top: 5, left: t}
});
Use cursorAt: top:, left: and appendTo: 'body'
See my answer with example here.
jQuery draggable shows helper in wrong place after page scrolled
I had the same problem. This is caused by the use of margins to center elements. Try using position absolute!
I removed position:absolute on dragable object

get ID of dropped div and hide all other divs without this class

Sorry for the confusing title, I hope I can explain.
http://thetally.efinancialnews.com/tallyassets/suebanks/suebanks.html
In this example you can drag a red box from the right into the grey box at the top left, each red box has a unique ID. When this red box is dropped in, I would like all the black boxes below to disappear EXCEPT the ones who's CLASS matches the unique ID of the red square.
The first box has an ID of 'barclays', as do 2 of the black boxes, so those 2 should remain
The second has an ID of lloyds, so only 1 of those black boxes should remain.
Here is the javascript code I am using:
$(init);
function init() {
$('.draggable').draggable({
containment: '#maincontain',
stack: '.bankbox div',
cursor: 'move',
revert: true
});
$('.judge').droppable({
drop: handleDropEvent
});
}
function handleDropEvent(event, ui) {
var draggable = ui.draggable;
ui.draggable.position({
of: $(this),
my: 'center bottom',
at: 'center bottom'
});
alert('The square with ID "' + draggable.attr('id') + '" was dropped onto me!');
}
...so what I need to do is get the 'draggable.attr('id') as is displayed in the alert, then create something in the handleDropEvent that says... HIDE all divs in .lawyers div, except those with a class equal to draggable.attr('id')
I've tried hacking it together but not getting the result I'm after
Hope it isnt too confusing, thanks for any advice
untested but your handleDropEvent should look similar to this...
function handleDropEvent(event, ui) {
var draggable = ui.draggable;
ui.draggable.position({
of: $(this),
my: 'center bottom',
at: 'center bottom'
});
alert('The square with ID "' + draggable.attr('id') + '" was dropped onto me!');
//Add these lines:
var lawyers = $('.lawyers .lawyer');
lawyers.not('.'+draggable.attr('id')).hide();
lawyers.filter('.'+draggable.attr('id')).show();
}
here is a working fiddle:
http://jsfiddle.net/g30rg3/c3Dt9/1/
Check this page:
http://api.jqueryui.com/droppable/#event-drop
Hmm - i usually have the droppable area named droppable ...
Think it will be something like this:
$( ".droppable" ).droppable({
drop: function( event, ui )
{
$( ".blackBox" ).addClass('hideBox');
}
});
Then use the hideBox class that has now appended itself to blackBox to hide??
Check the info in that link though i think it might be what you need. Or pop it into codepen so people can play :)
You just have to add
$('.lawyers').not('.' + draggable.attr('id')).hide();
after the ui.draggable.position command.

Allow the draggable content exceed but not within the parent boundary in Jquery?

I am using Jquery ui and it provide a function for me to make draggable content. It has an option 'containment' that force the draggable item move within the box.
However, for my case, the content (image) must exceed the screen , how can I force it not to drag inside the screen?
Thanks
$("#popup").draggable({
addClasses:true,
scrollSpeed: "200",
containment: "parent",
//appendTo: "body",
helper: function(){
// Create an invisible div as the helper. It will move and
// follow the cursor as usual.
return $('<div></div>').css('opacity',0);
},
drag: function(event, ui){
// During dragging, animate the original object to
// follow the invisible helper with custom easing.
var p = ui.helper.position();
$(this).stop().animate({
top: p.top,
left: p.left
},1000,'easeOutCirc');
}
});

Change JQuery droppable over behavior

Please see my source code at: http://jsfiddle.net/rAmSG/9/
The blue item should be dropped at an of the other 3 divs. This already works correctly. But I want to have a effect when the blue item is over one of the other divs (and the mouse is not released yet). The corresponing div should be colored grey (but only the smallest div, like the drop behavior).
Does anyone have a suggestion how to do this?
Also I'm not able to get the 'hoverClass' settings working, any solutions for this too?
Thanks in advance!
You have problems with hoverClass because you're defining a background color for the droppable elements using an id selector, and that rule takes precedence even when you apply the dark class to the elements.
You can increase the .dark rule's priority with !important:
.dark {
background-color: #333333 !important;
}
Then you can use hoverClass as expected:
$("#dropDiv1, #dropDiv2, #dropDiv3").droppable({
greedy: true,
drop: function() {
$(this).css("background-color", "black");
},
tolerance: "pointer",
hoverClass: "dark"
});
You will find an updated fiddle here.
Add an out function:
$(document).ready(function(e) {
$("#dragDiv").draggable();
$("#dropDiv1, #dropDiv2 , #dropDiv3").droppable({
greedy: true,
drop: function()
{
$(this).css("background-color", "black");
},
over: function()
{
$(this).css("background-color", "#333");
},
out: function()
{
$(this).css("background-color", "");
},
tolerance: "pointer"
});
});
This will reset the background-color when the blue square leaves a rectangle.

Expand containing div when dragging an item inside it and reaching limits

My page has several items (divs) that are draggable and resizable.
My code for doing this is given below:
part.draggable(
{
containment: 'parent',
drag: function(event, ui){
partIsDragging = true
part.prev().css('top', ui.position.top - 20 ).css('left', ui.position.left )
part.prev().show()
},
stop: function(event, ui) {
partIsDragging = false
}
}).resizable({
containment: 'parent',
handles: 'ne, se, sw, nw,n,w,e,s',
stop: function() {
}
});
The html structure for these is the following:
<body>
<div id="wrapper">
<div class="draggableItem"></div>
<div class="draggableItem"></div>
<div class="draggableItem"></div>
<div class="draggableItem"></div>
</div>
</body>
In my css files i have set body height: 100% and wrapper height: 100%. Width is always fixed for wrapper, width: 950px. I want my div to expand in height when the draggableItem reaches the bottom of the wrapper. Right now when the page is loaded, it has the height as big as the resolution allows it but in case I have more items in the wrapper then everything becomes cluttered and I would like when dragging an item to somehow expand the wrapper in height dynamically. This should happen only if I hit the bottom border.
PS: I am using jQuery and jQuery-ui.
I may have a solution. First off, I replaced part with '.draggableItem' and this where appropriate. Please tell me if that breaks the code in some critical way. In addition, I removed part.prev().css('top', ui.position.top - 20 ).css('left', ui.position.left ) in the code below.
function adjustWrapperHeight(movingObject)
{
var objectBottomPosition = $(movingObject).offset().top+$(movingObject).height()
var wrapperBottomPosition = $("#wrapper").offset().top+$("#wrapper").height()
if(wrapperBottomPosition-objectBottomPosition<distanceBuffer)
{
$("#wrapper").height($("#wrapper").height()+distanceBuffer+1)
}
}
var distanceBuffer = 20;
$('.draggableItem').draggable(
{
containment: 'parent',
drag: function(event, ui)
{
partIsDragging = true
adjustWrapperHeight(this)
},
stop: function(event, ui)
{
partIsDragging = false
}
}).resizable(
{
handles: 'ne, se, sw, nw,n,w,e,s',
resize: function(event, ui)
{
adjustWrapperHeight(this)
var objectRightPosition = $(this).offset().left+$(this).width()
var wrapperRightPosition = $("#wrapper").offset().left+$("#wrapper").width()
if(wrapperRightPosition<=objectRightPosition)
{
$(this).width(ui.originalSize.width)
var containmentLeftPosition = wrapperRightPosition-$(this).width()
$(this).offset({top:$(this).offset().top,left:containmentLeftPosition})
}
}
})
})
The function adjustWrapperHeight(movingObject) adjusts div#wrapper's height depending on a movingObject's bottom position. That is, when movingObject "pushes up" against div#wrapper's borders, it adjusts div#wrapper's height.
I had to use a hack for resizable. The containment: 'parent' for resizable (but not draggable) sets the containment to the container's ORIGINAL height or so it seems. That means as the height of div#wrapper dynamically changes, the constraint set by containment: 'parent' does not dynamically change. To fix this, I removed containment: 'parent' and indeed the entire containment and ensured that div#wrapper's right containment isn't broken within the resize event. Note that you should probably do this with div#wrapper's left containment as well.
Please tell me if this was helpful. Thank you.

Categories