This is the code I have so far for my draggable-droppable-resizable functionality:
var cont1 = $(this.el).find('.image');
var cont2 = $(this.el).find('#container2');
console.log(cont1);
$(cont1).draggable({
helper: 'clone',
cursor: 'move',
revert: 'true'
});
$(cont2).droppable({
accept: 'img',
drop: function(event, ui) {
var $canvas = $(this);
var $container = $('<div>');
if (!ui.draggable.hasClass('canvas-element')) {
var $canvasElement = ui.draggable.clone();
$canvasElement.addClass('canvas-element');
$container.draggable({
cursor: "move",
// delay: 1000,
scroll: false
// containment: "parent"
}).resizable({
//containment: "parent",
handles: 'n, e, s, ne, nw, se, sw',
aspectRatio: true
});
$container.append($canvasElement).prependTo(cont2);
$canvasElement.css({
left: $container.left,
top: $container.top,
position: 'relative',
height: '100%',
width: '100%'
});
//$canvasElement.css('left', ui.position.left-80+'px').css('top', ui.position.top-80+'px').appendTo(this);
}
}
});
Here's the jsFiddle.
What I would like to achieve is for the dropped images to remain in the place where they were dropped.
There are also some other issues - the images that have already been dropped before change their positions after a new one gets dropped and I would like to get rid of this issue.
What can I change to implement that functionality?
You will need to set the .image elements to position: absolute when inside of the container. You then need to calculate their left and top based on the position of the drop event and the offset of the container.
CSS:
#container2 .image{
position: absolute;
}
JS:
var containerOffset = $container.offset();
$canvasElement.css({
left: ui.position.left - containerOffset.left,
top: ui.position.top - containerOffset.top
});
http://jsfiddle.net/E9y8Q/7/
Related
I am writing this after hundreds of references. I want to create/or Nest Thermostat like scrolling effect. I found this solution https://jsfiddle.net/desandro/daZmA/ but its parent has fixed position. Which I can't use within the website.
window.addEventListener( 'load', function() {
var box = document.getElementById('box'),
docHeight = document.documentElement.offsetHeight;
window.addEventListener( 'scroll', function() {
// normalize scroll position as percentage
var scrolled = window.scrollY / ( docHeight - window.innerHeight ),
transformValue = 'scale('+scrolled+')';
box.style.WebkitTransform = transformValue;
box.style.MozTransform = transformValue;
box.style.OTransform = transformValue;
box.style.transform = transformValue;
}, false);
}, false);
body {
height: 2000px;
}
#container {
width: 200px;
height: 200px;
border: 2px solid;
position: fixed;
}
#box {
width: 100%;
height: 100%;
background: red;
}
<div id="container"><div id="box"></div></div>
Can anybody assist me or suggest a good reference or a existing plugin to use?
Thanks in advance
I highly recommend the GSAP scrollTrigger plugin.
https://greensock.com/scrolltrigger/
https://greensock.com/docs/v3/Plugins/ScrollTrigger
https://codepen.io/GreenSock/pen/gOabMXv
https://greensock.com/st-demos/
It makes animating elements based on scroll position very easy. For example
gsap.timeline({
scrollTrigger: {
trigger: ".thermo",
start: "center center",
end: "bottom top",
scrub: true,
pin: true
}
})
.from(".dial", { y: innerWidth * 1.5 })
Basically, I'm trying to drop a draggle element in a droppable element with jquery draggable widget, but the droppable element's drop function gets called when the draggable element is on the same line as the droppable element, it's meant to get called only when the draggable element is over the droppable element.
This is a link to the full code https://jsfiddle.net/AdokiyePaul/5z41se6h/4/
This image below describes the error, the black line illustrates the draggable element and shows that the droppable element still gets highlighted even when the draggable element is not over it.
This is the jquery function used
$(function () {
// var zoom = $("#articles").css("zoom");
$(".article").draggable({
revert: 'invalid',
zindex: 1000,
appendTo: "body",
containment: "window",
cursorAt: {
// top: 200,
// left: 50
},
scroll: false,
helper: "clone",
start: function (event, ui) {
offset_start = {
x: ui.position.left - event.pageX,
y: ui.position.top - event.pageY,
};
// var factor = 1 / zoom - 1;
ui.position.top += Math.round(
ui.position.top - ui.originalPosition.top
//* factor
);
ui.position.left += Math.round(
ui.position.left - ui.originalPosition.left
//* factor
);
$(ui.helper).addClass("article-dragging");
},
stop: function (event, ui) {
$(ui.helper).removeClass("article-dragging");
},
drag: function (event, ui) {
// ui.position.top = event.pageY + offset_start.y;
// ui.position.left = event.pageX + offset_start.x;
ui.position.top =
event.pageY - $(".article-dragging").outerHeight() / 2;
ui.position.left =
event.pageX - $(".article-dragging").outerWidth() / 2;
},
});
$("#folders li").droppable({
accept: "div.article",
hoverClass: "over",
drop: function (event, ui) {
ui.draggable.detach().appendTo($(this));
},
});
});
Consider the following.
$(function() {
console.log('dkdk')
$(".article").draggable({
appendTo: "body",
revert: 'invalid',
zindex: 1000,
containment: "window",
scroll: false,
helper: function(event) {
var $el = $(event.target).closest(".article");
return $("<div>", {
class: "article article-dragging"
}).html($el.children().clone()).position({
my: "center",
at: "center",
of: event
});
}
});
$("#folders li").droppable({
accept: "div.article",
hoverClass: "over",
drop: function(event, ui) {
ui.draggable.detach().appendTo($(this));
},
});
});
Example: https://jsfiddle.net/Twisty/pf1xnet6/32/
I found that the positioning was causing a lot of odd issues. I also saw these with clone, so I just created a new element with the right items and used this as the Helper.
Have such code :
var $canvas = $("#canvas");
var canvas = new fabric.Canvas('canvas', {
hoverCursor: 'pointer',
selection: false
});
var rect1 = new fabric.Rect({
width: 200,
height: 100,
left: 0,
top: 50,
angle: 30,
fill: 'rgba(255,0,0,0.5)'
});
canvas.add(rect1);
$canvas.droppable({
drop: dragDrop,
over: enterIn,
});
function enterIn(e, ui) {
event.preventDefault();
rect1.width = 400;
}
function dragDrop(e, ui) {
var element = ui.draggable;
var imgInstance = new fabric.Image(element.data("image"), {
left: x,
top: y,
});
canvas.add(imgInstance);
}
Problem:
rect1 width change is applied only after drop on canvas.
But I tested that enterIn function is working fine.
Could you advise something?
I am using Fabric.js and jQuery UI for a drag and drop scene creator. When I drag and drop an image into the canvas the image becomes blurry/pixelated and appears to be zoomed in. I've been searching Stackoverflow and Google forever and can't find any solutions. I'd appreciate any suggestions on how to fix it!
Here is my code:
// HTML
<canvas id="scene"></canvas>
// Draggable setup
$('.scene-item').draggable({
helper: 'clone',
appendTo: 'body',
containment: 'window',
scroll: false,
zIndex: 9999
});
// Drop Setup
var canvas = new fabric.Canvas('scene');
canvas.setDimensions({
width: '800px',
height: '500px'
}, {
cssOnly: true
});
document.getElementById("scene").fabric = canvas;
canvas.on({
'object:moving': function(e) {
e.target.opacity = 0.5;
},
"object:modified": function(e) {
e.target.opacity = 1;
}
});
$('#scene').droppable({
drop: function(e, ui) {
if ($(e.target).attr('id') === 'scene') {
var pointer = canvas.getPointer();
fabric.Image.fromURL(ui.draggable[0].currentSrc, function (img) {
console.log(img);
img.set({
left: pointer.x - 20,
top: pointer.y - 20,
width: 52,
height: 52,
scale: 0.1
});
//canvas.clear();
canvas.add(img);
canvas.renderAll();
});
}
}
});
This is what the images look like on and off the canvas:
Here is a demo jsfiddle.net/dmLr6cgx/1
I figured out the problem. I had to replace:
canvas.setDimensions({
width: '800px',
height: '500px'
}, {
cssOnly: true
});
with
canvas.setHeight(500);
canvas.setWidth(800);
canvas.renderAll();
And now it works fine.
Found a lightway draggable function. How can I lock the draggable black block in parent area? Do i need to do a width and height to limit black block area?
online sample http://jsfiddle.net/zqYZG/
.drag {
width: 100px;
height: 100px;
background-color: #000;
}
.box{
width: 500px;
height: 400px;
background-color:red;
}
jQuery
(function($) {
$.fn.draggable = function(options) {
var $handle = this,
$draggable = this;
options = $.extend({}, {
handle: null,
cursor: 'move'
}, options);
if( options.handle ) {
$handle = $(options.handle);
}
$handle
.css('cursor', options.cursor)
.on("mousedown", function(e) {
var x = $draggable.offset().left - e.pageX,
y = $draggable.offset().top - e.pageY,a
z = $draggable.css('z-index');
$draggable.css('z-index', 100000);
$(document.documentElement)
.on('mousemove.draggable', function(e) {
$draggable.offset({
left: x + e.pageX,
top: y + e.pageY
});
})
.one('mouseup', function() {
$(this).off('mousemove.draggable');
$draggable.css('z-index', z);
});
// disable selection
e.preventDefault();
});
};
})(jQuery);
$('.drag').draggable();
Here is a simple way to do it, using the getBoundingClientRect() function: updated JSFiddle
This just constrains the l and t variables from your original code, to be within the parent node's dimensions.
See containment option!
use :
$( ".selector" ).draggable({ containment: "parent" });