We Keep Coding

drag and drop feature created using jquery.ui/draggable, currently facing one issue that how to create scroll div in dropable area

In the below demo there are some inputs that we can drag and drop in the drop-zone. What I need is there any possibility that if user dragging any element then that drop-zone should be scroll-able. We have one property named "scroll:true" but it is not working. For demo please check below link
https://codepen.io/piyushSinghalDemo/pen/ddNBVv?editors=1000
$draggableOperators.draggable({
cursor: "move",
opacity: 0.7,
scroll: true,
helper: 'clone',
appendTo: 'body',
zIndex: 1000,
stop: function(e, ui) {
var $this = $(this);
var elOffset = ui.offset;
var containerOffset = $flowchart.offset();
if (elOffset.left > containerOffset.left && elOffset.top > containerOffset.top && elOffset.left < containerOffset.left + $flowchart.width() && elOffset.top < containerOffset.top + $flowchart.height()) {
var flowchartOffset = $flowchart.offset();
var relativeLeft = elOffset.left - flowchartOffset.left;
var relativeTop = elOffset.top - flowchartOffset.top;
var positionRatio = $flowchart.flowchart('getPositionRatio');
relativeLeft /= positionRatio;
relativeTop /= positionRatio;
var data = getOperatorData($this);
data.left = relativeLeft;
data.top = relativeTop;
$flowchart.flowchart('addOperator', data);
}
}
});
drag and drop feature created using jquery.ui/draggable library, however currently facing one issue that how to create scroll div in droppable area codepan for demo.

Fade out div as it's dragged near another div

I have a draggable div that can be dropped into a droppable div. This works fine. The draggable div contains a span element. I would like this span element to fade out as it approaches the droppable div.
I have a draggable fadeout/in example based on another answer, which applies to when you drag the element to the side of the window. I tried modifying this to fit my needs but it doesn't sem to be working for some reason.
Drag the red sqaure to the right handside. you will notice it fades in/out as you drag it.
Demo Fiddle http://jsfiddle.net/EybmN/32/
$('#draggable').draggable({
drag: function(event, ui) {
console.log(ui.helper.find('span'));
ui.helper.find('span').css('opacity', 1 - ui.position.left / $(window).width());
}
});
My attempt of modifying this to have the behaviour explained above.
Demo http://jsfiddle.net/EybmN/30/
$('#draggable').draggable({
drag: function(event, ui) {
console.log(ui.helper.find('span'));
$el = $('.droppable.blue');
var bottom = $el.position().top + $el.outerHeight(true);
var $span = ui.helper.find('span');
$span.css('opacity', 1 - $span.top / bottom);
}
});

You need to get the ui position. Then you need to calculate that with the distance from the div.
Fiddle http://jsfiddle.net/EybmN/34/
$('#draggable').draggable({
connectToDroppable: '.droppable',
revert: 'invalid',
drag: function(event, ui) {
var $span = ui.helper.find('span');
var opacity = ((ui.helper.offset().top - ui.helper.outerHeight()) - ($('.droppable.blue').offset().top + $('.droppable.blue').outerHeight())) / 100;
$span.css('opacity', opacity);
}
});
$(".droppable").droppable({
accept: '#draggable',
drop: function(event, ui) {
}
});
Edit
If you would like it more gradual, then get the start position and then calculate the percentage based on the dragging position.
Fiddle http://jsfiddle.net/EybmN/35/
var startPos = 0;
$('#draggable').draggable({
connectToDroppable: '.droppable',
revert: 'invalid',
drag: function(event, ui) {
if(!startPos) startPos = ui.helper.offset().top;
var $span = ui.helper.find('span');
var opacity = (ui.helper.offset().top - (ui.helper.outerHeight()*2.5) - ($('.droppable.blue').offset().top + $('.droppable.blue').outerHeight())) / startPos + .5;
$span.css('opacity', opacity);
}
});
$(".droppable").droppable({
accept: '#draggable',
drop: function(event, ui) {
}
});

I have a draggable image and when I drop it out of an overflow/scrollable area the click function doesn't work

I have a scrolling div that has images inside of it. I drag the image outside of the scrolling area and drop it onto another area.
When I drop it onto the area I want to record the x and y value for where the image is and use an ajax call to record it to a database. At the moment I am able to get the x and y in an alert when it is dropped but it doesn't save it when it drops. It will save to the database when I click the image after I place it onto the area.
$('.dragthis').draggable({
cursor: 'pointer',
revert: "invalid" ,
helper: function(){
$copy = $(this).clone();
return $copy;},
appendTo: 'body',
scroll: false
});
$("#dragarea").droppable({
accept: '.dragthis',
hoverClass: 'hover',
tolerance: 'touch',
drop: function(event, ui){
if (ui.draggable.hasClass('dragthis')) {
$(this).append(ui.draggable); ui.draggable.css('top', ui.position.top);
ui.draggable.css('left', ui.position.left);
ui.draggable.css('position', 'absolute');
ui.draggable.draggable('destroy').draggable();
}
var offset = $(this).offset();
var relativeX = (event.pageX - offset.left);
var relativeY = (event.pageY - offset.top);
alert("X: " + relativeX + " Y: " + relativeY);
$('img').click(function(){
var name = $(this).attr('src');
alert(name);
$.ajax({
method:"POST",
url:"set.php",
data: ({xValue: relativeX, yValue: relativeY, nameValue: name}),
});
});
}
});

JS while loop change value

I have some JS code that can track positions of DOM elements by use of their class. However, I need this class name changed for a specific amount of times. My code so far is this:
All the code that says added, is my poor try to make it work, just to give you an idea of what I am meaning.
var offset = 0,
xPos = 0,
yPos = 0,
item_number = 0; //added code
$(document).ready(function(){
while(item_numer<5) { //added code
$(".item" + item_number ).draggable({ //added code, the "item" has to be shown on the website as "item0".
containment: '#house_wall1',
drag: function(){
offset = $(this).position();
xPos = offset.left;
yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
},
// Find original position of dragged image.
start: function(event, ui) {
// Show start dragged position of image.
var Startpos = $(this).position();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},
// Find position where image is dropped.
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
}
});
item_number++;
}
});

You're placing the ending } a bit too soon.
The call to .draggable() and the Object literal passed to it actually stretch quite a few lines down to the 1st }); near the bottom. The loop should surround all of it.
$(document).ready(function(){
while (item_number < 5) {
$('.item' + item_number).draggable({
// around 20 lines
});
item_number++; // increment counter
} // and end of loop
});
Though, the counter may not be necessary. Since you're using a class selector, class names can be reused and .draggable() will apply to each of the matched elements.
$(document).ready(function () {
$('.item').draggable({
// ...
});
});

Are you simply missing an increment on item_number?
while(item_numer<5) {
$(".item" + item_number ).draggable({ /* stuff */ });
item_number++;
}

How to select all divs that overlay with a draggable div in jquery?

I'm building a graph displaying events happening over time. Each of my event is an horizontal bar that is created using a <div> as shown below:
<div class="aaaa" style="margin-left: 0.00%; width:100.00%;">aaaa</div>
<div class="aaaa" style="margin-left: 5.00%; width: 20.00%;">bbbb</div>
<div class="aaaa" style="margin-left:25.00%; width: 50.00%;">cccc</div>
<div class="aaaa" style="margin-left:55.00%; width: 45.00%;">dddd</div>
At the top of this graph, I have a "ruler" which is a draggable and resizable <div>
<div id="draggable2" class="draggable ui-widget-content">
<p>Ruler</p>
</div>
My intention is to drag this ruler horizontally and to use it to select all bars of my graphs that are below the ruler. When bars are selected, the background color should change.
So far I manage to drag and to resize my ruler as I want with the following code:
$(function () {
$("#draggable2").draggable({
axis: "x"
});
});
$(function () {
$("#draggable2").resizable({
helper: "ui-resizable-helper",
handles: "se, sw, e, w"
});
});
I also manage to select the bars I want using the following code:
$(".fake").selectable({
filter: "div"
});
You can see on the fiddle referenced below that when you do a "lasso selection", my bars become pink.
However, I would like to combine my ruler with this "lasso selection", or in other words, I would like that once my ruler is dragged, all <div> that are below become selected.
I've created a fiddle to illustrate my problem: http://jsfiddle.net/Lge93/
As I'm new to Javascript and Jquery, I would really appreciate any solution or suggestion.
Thanks for your time
Edit post answers:
My final solution based on the code provided by Jtromans is available here: http://jsfiddle.net/Lge93/5/

Here's my solution:
$(function() {
$( "#draggable2" ).draggable({
axis: "x",
drag: function(e) {
var selectableElements = $(".fake").data().uiSelectable.selectees;
var ruler = $(e.target);
$.each(selectableElements, function(i, v) {
if(ruler.offset().left >= $(v).offset().left) {
$(v).addClass("ui-selected");
}else {
$(v).hasClass("ui-selected") && $(v).removeClass("ui-selected");
}
});
}
});
});
$(function() {
$( "#draggable2" ).resizable({
helper: "ui-resizable-helper",
handles: "se, sw, e, w"
});
});
$(".fake").selectable({filter:"div"});
http://jsfiddle.net/Lge93/3/

If I understand your question correctly, it sounds like you could solve the problem in the following way.
Upon interacting with the ruler, you will be able to calculate the new width, x- and y-coordinates. This is pretty straight forward and requires only a few lines of jQuery code in the callback after any form of interaction with your ruler.
You could then check for each item in your (gant?) chart to see whether it occupies any of the same area that the ruler does. This would be relative to the parent container.
The devil is in the detail for how you would like to handle whether the ruler is 'in' the Gant chart div item. And below is some code to get your started on working out whether the Ruler occupies the some of the same location as the other divs:
function checkOverlays (x, width, y, height) {
$(".aaaa").each (function (i,e) {
var thisWidth = $(this).width();
var thisHeight = $(this).height();
var offsetTop = $(this).offset().top - $(this).parent().offset().top;
var offsetLeft = $(this).offset().left - $(this).parent().offset().left;
console.log('x coverage: ' + offsetLeft + " to " + parseFloat(thisWidth + offsetLeft));
console.log('y coverage: ' + offsetTop + " to " + parseFloat(thisHeight + offsetTop));
if (offsetLeft > x && offsetLeft < parseFloat(x + width) ) {
console.log("I'm in the same x space");
$(this).css('background-color', 'red');
}
if (offsetTop > y && offsetTop < parseFloat(y + height) ) {
console.log("I'm in the same y space");
$(this).css('background-color', 'red');
}
})
}
$("#draggable2").on("resize drag", function () {
var thisWidth = $(this).width();
var thisHeight = $(this).height();
var offsetTop = $(this).offset().top - $(this).parent().offset().top;
var offsetLeft = $(this).offset().left - $(this).parent().offset().left;
console.log('x coverage: ' + offsetLeft + " to " + parseFloat(thisWidth + offsetLeft));
console.log('y coverage: ' + offsetTop + " to " + parseFloat(thisHeight + offsetTop));
checkOverlays (offsetLeft, thisWidth, offsetTop, thisHeight)
});