HTML: Turn off Drag and Drop Shadow/Ghost - javascript

I would like to turn of the dragging-shadow that html's drag and drop shows by default. I saw this: http://www.kryogenix.org/code/browser/custom-drag-image.html for changing the image, but not completely removing the image.
When i used this:
var dragIcon = document.createElement('img');
dragIcon.src = '';
dragIcon.width = 100;
dragIcon.style.display = 'none';
event.originalEvent.dataTransfer.setDragImage(dragIcon, -100, -100);
the ghost did dissapear, but i was no longer able to drag the image. This could have to do with me having to use angularJS as well...but there is no way around that anymore at this point.
Problem:
Move a div on a page that resizes ONLY the div right above itself dynamically (inside dragging function).
Question:
I wanted to know if there is a way to turn off only the ghost, but keep all the rest of the functionality as is? This is most cosmetic than anything, but the ghost really does not add anything for me, since i am resizing everything on the fly.
Any help would be appreciated.

Related

BluImp Gallery allows image to be dragged vertically

I am using the blueImp image gallery in a carousel.
I am allowing images to be dragged for a mobile user, but images can be dragged vertically as well as horizontally, meaning you can get the image half dragged off screen.
As you drag, the .slide element changes inline to dimensions like:
style="transform:translate(-100px, 256px)"
I have tried setting a translateY(0) !important but this just overwrites the dragging altogether.
I am using jQuery, so maybe there is a way of watching the drag event? Any help useful.
the only way I managed to do it was to overwrite blueimp's ontouchmove function. You just need to comment out the translateY call. I took the source from https://github.com/blueimp/Gallery/blob/master/js/blueimp-gallery.js.
Place the whole overwite somewhere in your js, ideally separate file with comment for future.
blueimp.Gallery.prototype.ontouchmove = function (event) {
...
} else {
// Removed move up/down funictionality
//this.translateY(index, this.touchDelta.y + this.positions[index], 0);
}
};
Hope it helps you!
Maybe blueimp can add an option to toggle this behavious in future :)
Pav

HTML5 drag cursor

Pretty simple question but nothing I try works. Basically I'm using drag events (dragstart and dragend) and once I've started dragging, the cursor is always the stop sign thing (the circle with a horizontal line through it).
I've tried: Adding a class to the body and changing the cursor with css. Setting event.dataTransfer.dropEffect = 'move', e.dataTransfer.effectAllowed = 'move'.
I've basically scoured all the google results and nothing has worked. Surely this is something that you can change. I don't want users thinking they can't drop domething somewhere because of this.

Animated timeline with javascript

I am trying to create some time line effect. It will have couple of points for each time with designated picture inside a circle.
I want them to be clickable. When I click, I want another picture(plane) to move from its current location to where it is clicked within 1 second and shrink and disappear. Something similar to following GIF.
I have found couple of examples but I couldn't put them together to achieve what I want. I really searched a lot but couldn't solve it on my own. I am an iOS developer and no background on web development.
I will appreciate if you can help me on this.
Give a relative position to the timeline. Then you can get the position of a clicked circle, and assign it to the movable one. Add CSS transitions to have a better visual result.
Example using jQuery:
$(document).on("click", ".point", function () {
var $this = $(this);
var $abs = $(".is-absolute");
$abs.css("top", $this.position().top);
$abs.css("left", $this.position().left);
});
http://jsfiddle.net/dsr4esn3/

html5 canvas element disappears

I have a <canvas> element that I put in a div using jQuery. The lines I draw on that canvas appear and then disappear very quickly.
When I put text inside the $('#solutionDiv') div, it appears when the page loads, and then gets covered (briefly) by my canvas, and then reappears when the canvas vanishes. This happens in FireFox and Chrome. I am using a library for sliders called tigra_slider_control. I don't think that's the issue, but it might be.
var solnCanvas=document.createElement('canvas'); // should be accessible through $('#solutionDiv > canvas')
solnCanvas.width = 480;
solnCanvas.height = 480;
var solnContext=solnCanvas.getContext('2d');
solnContext.strokeStyle = '#00f'; // blue lines
solnContext.lineWidth = 4;
solnContext.moveTo(50,16);
solnContext.lineTo(50,5);
solnContext.lineTo(5,5);
solnContext.stroke();
$('#solutionDiv').append(solnCanvas);
The corresponding div is:
<div id="solutionDiv" style="width:580px;height:500px;" class="boxy">
Now you see it ... <br />
Now you don't
</div>
I don't need (or want) text in this div. This is just for experimenting ... Any help would be much appreciated.
So, here is my long-awaited answer to my own question. It seems to have had something to do with the fact that I was dynamically adding the div and the canvas. When I added the div and the canvas in the html at the very outset, the canvas stayed put. This is not exactly a solution -- more of a workaround. Rather than adding the canvas later on, I just made it visible.
If you don't need (or want) the text in the div, take the text out of the div.

Changing Button Attributes to Match Slider Window

Greets,
First - this site is incredible. I've learned a ton of great things here!
I'm using a jquery based slider program to display a sequence of pictures (a series of books). Beneath the slider window I've positioned a "PDF" buttons. I'm trying to sort how to have the button download the file associated with whatever image is currently displayed in the slider box. So if "Picture #3" is showing in the slider window I need the PDF button to be associated with the respective #3 file. I believe I need to change each button's attributes dynamically to match what's showing in the slider window.
You can view the beta site at beta
I suspect I'll need some sort of javascript to snag the click event and feed it to the button's attributes. That's as far as my shaky legs can carry me with this one. Can anyone point me in the right direction? I'm a real noob at this and learning slowly so use small words!
Cheers,
TY
You're on the right track. I think this would probably work, but I'm not used to culling from arrays of jQ elements.
Put the filename into an alt tag in your list items, then use this script:
$('#download-button').click( function() {
var left_pos = $('ul').css('left');
var win_width = $('ul').innerWidth();
left_pos = left_pos * (-1) /* Will convert from negative to positive */
var slide_num = left_pos/win_width;
var slides = $('ul').find('li');
$(this).attr('src', 'path/to' + slides[slide_num].attr('alt'));
});
Also, upon checking the living DOM while playing around with the slider, I noticed that it seemed to jump a bit if you changed directions toward the end of/beginning of the slides. You may want to investigate that

Categories