It's there any way to animate the "ghost image" when dragging the element?
Just like Google Drive, drag the files will trigger cool effect. I tried to add the CSS animation to the ghost-img, like this but it's not work.
go this way https://jsfiddle.net/mdvrkaer/4/ :
You miss the "drag" event. to move the ghost, make him follow the mouse cursor...
$(document).ready(function(){
dragAndDrop();
$('#ghost-img').hide();
});
function dragAndDrop(){
var dragElement = document.getElementById('row-1');
dragElement.addEventListener("dragstart",function(evt) {
$('#ghost-img').show();
//ghost image
var crt = document.getElementById('ghost-img').cloneNode(true);
crt.style.position = "absolute";
crt.style.top = "0px";
crt.style.right = "0px";
crt.style.zIndex = -1;
document.body.appendChild(crt);
evt.dataTransfer.setDragImage (crt, 0, 0);
},false);
dragElement.addEventListener("drag",function(evt) {
$('.ghost').css('top', evt.pageY);
$('.ghost').css('left', evt.pagex);
},false);
dragElement.addEventListener("dragend",function(evt) {
$('.ghost').hide();
},false);
}
Related
When the canvas that contains a createjs is zoomed using a zoom style (e.g. zoom: 0.5) buttons on the canvas have a different click target that is either on only one side of the button or no target at all.
var stage, label;
function init() {
stage = new createjs.Stage("demoCanvas");
stage.name = "stage";
var background = new createjs.Shape();
background.name = "background";
background.graphics.beginFill("red").drawRoundRect(0, 0, 150, 60, 10);
label = new createjs.Text("foo", "bold 24px Arial", "#FFFFFF");
label.name = "label";
label.textAlign = "center";
label.textBaseline = "middle";
label.x = 150/2;
label.y = 60/2;
var button = new createjs.Container();
button.name = "button";
button.x = 75;
button.y = 40;
button.addChild(background, label);
stage.addChild(button);
// listeners
var targets = [stage,button,label,background];
for (var i=0; i<targets.length; i++) {
var target = targets[i];
target.on("click", toggleText, null, false, null, false);
}
stage.update();
}
function toggleText(evt) {
label.text = (label.text == 'foo') ? 'bar' : 'foo';
stage.update();
}
body{
margin: 0;
text-align: center;
}
#demoCanvas{
background: tan;
width: 500px;
height: 300px;
transform-origin: 0 0;
transform: scale(0.2); // Firefox = This does not cause problem with button clicking
zoom: 0.2; // Other browsers = This causes a problem with button clicking in Chrome
}
<html>
<head>
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
</head>
<body onload="init();">
<canvas id="demoCanvas"></canvas>
</body>
</html>
Note that this will not fail in the SO snippet so I have also made this available as a Pen.
This behaviour presents itself in Chrome but not in Firefox (which recognises the transform: scale() style instead).
If the canvas needs to be scaled in the DOM how can this be done in Chrome without causing buttons to fail?
The zoom css style is considered non-standard so for Chrome and other Browsers you can use transform : scale() as well. I can confirm that zoom does break CreateJS - if you wanted to, you could add an issue to their EaselJS GitHub - not sure if it is worth fixing when transform : scale() can be used. Cheers.
CSS ZOOM: "Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future."
Trying to reproduce something similar to Openlayers with sidebar where once the sidebar is expanded the .ol-zoom margin-left is modified to change its position but I can't use jquery in my project, so looks for Vanilla JS or Angular based solution.
I saw that its quiet easy to change position of the openlayers Zoom buttons as answered here but I would like to change the position on some event trigger like a (sidebar-toggle button) button click.
Thanks
In JS you can dynamically add css to the application, for example
var css =
'.menuSeparator {' +
' border-bottom: solid 1px black;' +
'}';
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
Here is my solution
const olZoom = document.getElementsByClassName("ol-zoom");
const sideBarElements = document.getElementsByClassName("sidebar-left");
if(!this.sidebarVisibility) {
(olZoom[0] as HTMLElement).style.marginLeft = "0px";
(olZoom[0] as HTMLElement).style.marginTop = "60px";
} else {
setTimeout(() => {
(olZoom[0] as HTMLElement).style.marginLeft = ((sideBarElements[0] as HTMLElement).offsetWidth - 10) + 'px';
(olZoom[0] as HTMLElement).style.marginTop = "0px";
}, 50);
}
major issue what I was facing was that I wasn't casting Element to HTMLElement in typescript as explained here which was blocking me to apply my margin style
I'm looking to do a slide-card style website with html/css/js.
I have seen some nice examples like:
http://www.thepetedesign.com/demos/onepage_scroll_demo.html
http://alvarotrigo.com/fullPage/
However, what these DON'T seem to do is slide a page out WHILE the page underneath is visible, as if they were a stack of index cards. Parallax scrolling does this, but it typically will wipe the existing area, rather then scroll/move it off screen. Any ideas?
Here is a fiddle using JQuery that does something like what you are looking for, you could implement it with that one scroll effect of the card sliders and have it animate in probably.
http://jsfiddle.net/d6rKn/
(function(window){ $.fn.stopAtTop= function () {
var $this = this,
$window = $(window),
thisPos = $this.offset().top,
setPosition,
under,
over;
under = function(){
if ($window.scrollTop() < thisPos) {
$this.css({
position: 'absolute',
top: ""
});
setPosition = over;
}
};
over = function(){
if (!($window.scrollTop() < thisPos)){
$this.css({
position: 'fixed',
top: 0
});
setPosition = under;
}
};
setPosition = over;
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(function(){setPosition();});
setPosition();
};
})(window);
$('#one').stopAtTop();
$('#two').stopAtTop();
$('#three').stopAtTop();
$('#four').stopAtTop();
See the fiddle for HTML and CSS.
Not my fiddle just grabbed it with a quick google search.
Is there a way to make only part of a Packery/Draggabilly container draggable? Say, only making the .chartHeader in the below example draggable - yet having the overall .chartContainer move as one piece? Currently, only the .chartHeader is draggable and everything else stays behind. I'd like to have everything move at once like one big happy family.
Here's a fiddle: http://jsfiddle.net/uD5rG/
Thanks in advance!
<div class="chartContainer">
<div class="chartHeader">HEADER</div>
<div class="chartContent">CONTENT</div>
</div>
Here's my packery/draggabilly config:
var container = document.querySelector("#packeryContainer");
var pckry = new Packery( container, {
itemSelector: '.chartContainer',
columnWidth: 350,
rowHeight: 255,
gutter: 15
});
// make packery items draggable
var itemElems = pckry.getItemElements();
// for each item...
for ( var i=0, len = itemElems.length; i < len; i++ ) {
var elem = itemElems[i];
// get the .chartHeader element
var headerElem = elem.querySelector(".chartHeader");
// make element draggable with Draggabilly
var draggie = new Draggabilly( headerElem );
// bind Draggabilly events to Packery
pckry.bindDraggabillyEvents( draggie );
}
Fixed # http://jsfiddle.net/uD5rG/1/
I added draggabilly's handle option, as seen below
// make element draggable with Draggabilly
var draggie = new Draggabilly( elem , {
handle: '.handle'
});
Use the binding to jquery UI Draggable. It works fine for me with the jquery UI attribute handle.
http://packery.metafizzy.co/draggable.html#jquery-ui-draggable
Your solution, that you posted on jsfiddle does not work for me.
Just use the handle option like Cole mentioned.
$(function () {
var $container = $('.packery');
$container.packery({
columnWidth: 80,
rowHeight: 82 /* +2 for the bottom margin on .item */
});
// bind draggabilly events to item elements
$container.find('.item').each(makeEachDraggable);
function makeEachDraggable(i, itemElem) {
// make element draggable with Draggabilly
var draggie = new Draggabilly(itemElem, {
handle: '.header'
});
// bind Draggabilly events to Packery
$container.packery('bindDraggabillyEvents', draggie);
}
});
Here's a simple fiddle: http://jsfiddle.net/ex5TJ/
Also, have a look at this link for more details: http://draggabilly.desandro.com/
using jquery:
var draggie = $grid.find('.grid-item').draggable({
handle: '.ui-sortable-handle'
});
$grid.packery('bindUIDraggableEvents', draggie);
Hello i'm working on a project that requires canvas manipulation. I need to draw an image and have to move it within the canvas. Which was not so hard to accomplish.. However i need to change my cursor into "move" when hovering the image like
img{
cursor:move;
}
I couldn't find any way to do this. Any suggestion??
Thanks in advance..
When you drag an Kinetic.Image, you get dragstart and dragend events.
You can change the cursor type in those event handlers:
// starting to drag -- display the move cursor
image1.on('dragstart', function () {
document.body.style.cursor = 'move';
});
// done dragging -- display the regular cursor
image1.on('dragend', function () {
document.body.style.cursor = 'default';
});
Basically you need an element which you can style on the page but with display: none, then put that element onto the canvas like this:
var image = document.getElementById('image');
context.drawImage(image, 0, 0);