Hello I'm trying to drag an object between two ui-router ui-view elements
one ui-view element is the main 'canvas' and the other element is a right hand pane that had some or tags.
I got the objects draggable using angular-drag drop. However, when I try to drag things to the left onto the canvas? It ends up going behind the main canvas instead of on top of them.
I tried adjusting the z-index even trying it with !important but it di did not help to show the dragged object when I drag it into the canvas.
The following image shows what I mean when I drag the image halfway into the canvas. It gets hidden behind the canvas div.
Any advice on how I can correct this?
I discovered that my bug could be solved as follows.
I added the jquery ui options:
{
helper: 'clone', // creates a new object.
appendTo: 'body' // assigns new object to be a child of a selector
}
You can't just use appendTo as the JQ UI docs will tell you. You need the helper.
Related
I'm trying to run an animation based on scroll in the background of a React app.
I use Threejs with React Three Fiber. In R3F, there is a hook called useScroll which I want to use.
Problem is that my Threejs scene (a Canvas) is in the background with zIndex: -100, so the scroll handler doesn't get the user input.
If I remove the zIndex property, everything works, but It's not what I want.
The scene look like this demo, the only difference is that mine has element in front.
I don't know if the solution is to use a different css style or something more complexe to allow the handler to do his job. I've been looking at React Portal but I don't think it will work.
Any ideas ?
Thanks in advance.
I'm working on a basic design app where the user can upload images to a canvas, drag them around and resize them. The problem I have is resizing the image with a mouse drag. I'd like the user to position the mouse pointer on either corner of the bitmap image and drag either towards or away from the bitmap to resize it proportionally. I'd be grateful for any code or suggestions.
Lanny mentioned that you had this question here. ZIM, which is based on CreateJS has this functionality built in - it is called transform(). We also have an uploader built in called Loader().
Here is the code that you would use inside the ZIM template available on the code page at ZIM https://zimjs.com
const loader = new Loader().center();
loader.on("loaded", e=>{
e.bitmap.center().transform();
// or if you want multiple files
// loop(e.bitmaps, bitmap=>{
// bitmap.center().transform();
// });
loader.removeFrom();
stage.update();
});
Below is an image that has been loaded. You can try it here https://zimjs.com/explore/uploadresize.html. The transform interface will go away when the user clicks off the image and then comes back when they click on the image. There are various options for all of this that you can read about in the Docs available on the ZIM site.
All your regular CreateJS will work and you will find that ZIM is helpful in many other ways too! Aside from transform() there is drag() for normal dragging, and gesture() for pinch zoom and rotate - you would use one or the other of these not combined.
Iam new to css and html5.
I`m using bxslider and would like to have controls (arrow nav) outside the slider div. I made it according to http://bxslider.com/examples/custom-next-prev-selectors but I do not like it.
How to replace "onward" with an arrow image (jpg)?
How can I move my arrow image to the edge of the slider? I don't want it in the center but aside the slider.
http://www.pulik.edl.pl/WWWMG/foto.html
Why you don't use the controls of the own bxslider and change its css?
Then with left/right you can work around to make the controls to be on the edge of the slider.
Else, if you really want to use the custom controls, make a container around the controls and the slider. Then you can easily do the trick, if the container was made properly.
To move the direction controls outside of the content, you'll need to override the bxslider css in your own css file:
.bx-prev {
margin-left: -70px;
}
.bx-next {
margin-right: -70px;
}
This might cause a further issue where the controls are outside ALL of your content and not even visible. In that case you should wrap the whole slider control inside another div that has left and right padding.
So i am trying to create a stage where i can have multiple items on it that are draggable.. but when the stage is clicked and dragged all the elements move with it.
So far I can only get one or the other to work by adding the 'draggable' property to either.
Has anyone got a solution for how to get this working?
Here is the JSfiddle http://jsfiddle.net/KHVhU/
I have considered the possibility that I might need to make the containing div draggable using jquery-ui instead of trying to do the whole thing inside the canvas, but ideally wouldnt want to take this route
the correct kineticJs library was not included. Use the correct KineticJs below.
http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js
Now, each individual items will be draggable even with stage.
found the solution with the help of the setDraggable() function
Updated the JSFiddle here: http://jsfiddle.net/KHVhU/1/ :)
I am having 4 images inside Canvas in HTML5. When I drop the image somewhere in the Canvas, I want to display the name of the image inside my Canvas .
Is it possible? If yes, please tell me how can it be done?
The source code can be found here. KineticJS is used to handle the canvas.
I've never used KineticJS before, but from what I read in the doc :
To detect drag and drop events with KineticJS, we can use the on() method to detect dragstart , dragmove, or dragend events. The on() method requires an event type and a function to be executed when the event occurs.
It'll end up beign something like this
rajiniGroup.on('dragend', function(evt) {
// add your text somewhere using a shape text
};
Shape text are detailed in the doc as well.