I'm building a search engine interface. I've got some webpages raw content (including images) in Lemur indexes. I want to drag and drop images and implement image searching later. I know how to make an image draggable in HTML by setting draggable="True". But it's not a good choice for me to change raw contents in Lemur indexes. Is there any way that I can implement image drag and drop in my main.js?
BTW, I current implement text drag and drop by:
var selection=document.getElementById('lemurbox').contentWindow.getSelection();
But this seem can only get text since the selection will be NULL after dragging a image.
Have you looked at jQuery UI? They have these functionalities built into their scripts. You can test all of them out at http://jqueryui.com/
Related
I am trying to implement a plugin which enables user to drag the border of an HTML table to adjust the size of it (like below). I tried to use vanilla JavaScript but it is not perfect.
Or (as a brainstorm), maybe can I not treat it as a HTML table element but some kind of graphics on a panel and use libraries such as WebGL to make it interactive. And also implement text typing in that graphics to make it like a table. Not sure if this is feasible?
I'm really curious as to how sites like RightSignature and PandaDoc provide the drag and drop capability on a PDF. Basically, you upload a PDF to their site, then they display the PDF in a window (all the pages -- scrollable), then they have a panel on the side of the PDF viewer that has one to many form fields in it and the site allows you to drag those fields onto the PDF as placeholders.
I get that they are basically just recording the X/Y coordinates of where the form element is being placed. But how do are they actually accomplishing this from a technical perspective?
I know how to handle the PDF upload. I just don't know how to display the PDF and basically create an overlay that allows the user to drag fields onto it and record the x,y coordinates. This way when I want to create a version of that template, I know where to put the fields on the PDF.
Even if this question is quite old, I share my solution realized using the following libraries:
pdf.js (that renders a PDF file as an HTML component allowing the capturing of coordinates)
interact.js (for the drag and drop of placeholders)
Check my solution pushed to GitHub https://github.com/ValerioEmanuele/drag-and-drop-placeholders-into-PDF
I apologize in advance for the vague subject. I'm essentially looking for tutorial/guidance on the ability to dynamically select a grid of pixels within an image on a web page. What would be the best way to capture the grid of pixels the user dynamically selects?
You will have to do it in Javascript. There are different libraries and plugins available.
Just one as an example: http://odyniec.net/projects/imgareaselect/
I have very complex chart representation using svg (using d3.js library). Is it possible using javascript to create thumbnails of those area and display it somewhere on the page?
I have found jquery nailthumb plugin. But it needs image and it does not work exactly as I want.
Please let me know if it is even possible with javascript.
I'd like to display the image, then let the user create multiple rubber-band selections on the image. Each mouse-down creates an additional selection. Has anyone seen an implementation of this technique in javascript?
I did use this image cropper script. It uses a rubber band to select the crop area. The code is pretty simple to follow and you could probably modify it to do what you want. Selecting overlapping areas would probably be a bit of a challenge though.
Script: JavaScript Image Cropper UI, using Prototype & script.aculo.us