I've implemented drag and drop OK with jQueryUI draggable and droppable.
For the less savvy users, I'd like to also offer a visible "move" button. When they click this button, the element would be picked up, and when they click again on a drop target, it's dropped. So the same as drag and drop, but started with one click and dropped with another.
I know it would be possible to do this with separate code, but I'd rather not reinvent everything for a slight variation. Is there a way to get jQueryUI to do this?
The only thing I found is calling the trigger method of the draggable, but you have to pass a mousedown event...
Thanks
See my answer on this other question. If you change it so instead of
$("#headerDiv")
.mousedown(function(event) {
x = event.pageX;
y = event.pageY;
$(this).parent().addClass('movable');
})
.mouseup(function() {
$(this).parent().removeClass('movable');
});
bind to click and implement a toggling mechanism to decide if you are beginning the drag (mousedown equivalent) or ending the drag (mouseup equivalent) you should be most of the way there.
I would use .animate to animate the object to its target. I have done this before with a game. For example you could specify top and left coordinates for the element to move to onClick of the button.
Related
Please have a look at
www.jsbin.com/wigokojina/1/edit?html,css,js,output
I've added custom svg icons to the konva transformer, but the middle rotator icon is draggable even if i set draggable to false. The two other icons are fine and as expected, as far as dragging is concerned.
My questions are:
How do i disable the dragging for the rotator anchor, so that the icon doesnt move?
How do i disable all event handlers for an anchor, and add one click event? Ive tried shape.off('dragmove') etc. The only thing that helps is setting listening to false, but then im prevented from adding a new event listener. I want to disable all event handlers for the top right anchor, and add one onclick listener afterwards.
Is it possible to add the icons to the shape itself using fillPatternImage? Instead of adding the icon as a new shape like im doing. If its possible, please provide an example using the jsbin.
Thanks very much :-)
At the current moment konva#4.0.16 doesn't support fully customized Konva.Transformer. But you are making a good attempt.
How do i disable the dragging for the rotator anchor, so that the icon doesn't move at all?
You can reset the position in transform event (almost as you do it). But at the current moment, for performance reasons, inside transform events all anchors has "old" positions. So you see dragging of the icon from rotater anchor. To fix the issue we can force update a transformer:
circle.on('transform', function(){
transformer.update();
for (var button in buttons) {
var selector = button.replace('_', '-');
var shape = transformer.findOne('.' + selector);
var icon = transformer.findOne('.' + selector + '-icon');
icon.position(shape.position());
icon.x(icon.x() - 5.25); icon.y(icon.y() - 5.25);
layer.batchDraw();
}
});
How do I disable all event handlers for an anchor, and add one-click event
It can be something like this:
shape.listening(false);
icon.on('click', () => {
alert('delete');
});
Demo: https://jsbin.com/galetahara/4/edit?js,output
I am trying to use the ShowHide effect that comes with Kevin Moore's widget package here:
http://dart-lang.github.io/widget.dart/#showhide
Not sure how to use this. Anyone got an example I can look at ?
Basically all I want is for a dropdown to show with one of those effects if a certain event happens.
Your tips appreciated.
Thanks.
You need to add a listener for an event to an element in the DOM, and then use ShowHide.toggle(element, effect) to trigger an effect. Here is an example which listens for a click on a button, and toggles FadeEffect on an image each time it is pressed:
var button = query("#fadeButton")
..onClick.listen((event) {
ShowHide.toggle(query("#fadeImage"), effect: new FadeEffect());
});
If you wanted to fade in/out a dropdown when you click on a menu bar, then substitute "fadeButton" for the menu which listens for clicks, and "fadeImage" with the dropdown element.
Also, any other effect can be substituted for FadeEffect, such as DoorEffect, ScaleEffect, ShrinkEffect, etc.
I am trying to figure out a way to select rows in a TListview by dragging over them (like dragging a window over icons in Windows Explorer to select them). This is not about drag and drop, only dragging.
I don't think I need an action on MouseDown since that row is already selected when I click, but I think I need something like:
OnMouseMove check if X,Y is above a row
If so, change its IsSelected to true
If not, do nothing
I don't know if anything is needed on MouseUp
The question is, how can I check if the mouse x.y is within/above a Listview row?
Use GetItemAt method of TListView (and maybe also TListView.GetHitTestInfoAt).
Hi am using drag and drop from Jquery, and what I want to try and simulate is the drag and drop except during the drag motion I don't want the element to actually move from its place.
In the example here : http://jsfiddle.net/2LN5G/ when you drag the "Drag me to target" it is moved from the possition and reverts back when it is dropped. I want to still show "Drag me to target in the current position and still show the "Drag me to target" moving with the cursor. Is this possible ?
Take a look at the visual feedback example on jQueryUI.com.
Basically, you want to specify the helper option when calling the .draggable() method.
$(".draggable").draggable({
helper: "clone"
});
I have a heavily modified control based on TStringGrid. I want to allow the user to make selections in this grid but restrict the selection one single row (the current row).
Implementation:
When the user presses the left mouse button I am using a dirty hack: On OnMouseDown event I capture the mouse cursor and keep it on the current row. The user can move the mouse device up and down on its pad but the cursor will not go up or down. It will stay on the current row. When the user releases the button (OnMouseUp event), I release the capture.
However, this hack is as I said very dirty. There are several problems. For example, if the user presses the left mouse button (LMB) and then without releasing that button it presses the right button, the associated pop-up menu will pop but the mouse capture will never be released. So, the mouse will be locked in a screen region until the user will has the brilliant idea to click the LMB one more time to unlock the mouse. This may be a bug in D7. There is a separate post about it here: TStringGrid - OnMouseUp is not called!
There is a elegant way to do this?
Edit:
OnSelectCell is not working. OnSelectCell event is called only once when you click the cell. If you keep the button pressed and move the mouse to expand the selection, OnSelectCell will not be called again.
Indeed MoveCurrent appears only in TCustomGrid.MouseDown.
Use the OnSelectCell event and set the CanSelect var parameter depending on whether the ARow parameter is what you want.
A nice solution
Check the options property on TStringGrid
There is an Option called 'goRangeSelect'
Set this to false using the object inspector
Or programatically this can be done by
StringGrid1.Options - [goRangeSelect];
This answer is not elegant at all, but it works.
My solution is NOT to use the PopupMenu property of the StringGrid. Instead I implemented my own PopUpMenu property. Works almost perfect. There is on small problem, the bottom of the pop-up menu appears next to the cursor and not its top.