I am using https://github.com/furf/jquery-ui-touch-punch to map the touch events. jQuery UI droppable has the below code in which the event and ui objects are passed automatically. I want to write a custom handler to which I can pass the same objects. Could any one suggest how I can get the reference of ui object on touchend event on IPAD ? So that I can use same drop function for both desktop and IPAD.
drop: function(event, ui) {
dropFunction(event, ui);
}
so on touchend event I can call dropFunction(event,ui)
Additional info:
I am trying to achieve drag and drop from table row to a jstree. If I just use Touch Punch without modification I am able to do the drag and drop is also being called. As I am reading the values using the below code, it works on desktop browser but not on IPAD.
var newOrgId = $('#ohTreeDiv .jstree-hovered').find('span:last').text()
the jstree-hovered class is added automatically to the hovered node when using desktop browser however this does not get added on Ipad, so I am adding this class manually in touchend method. After this step I even get the hovered class added. When touchend happens it looks like the drop is not being called.
After dragging the element on the target node of the jstree I have to tap it so that the drop is triggered. #FrédéricHamidi
Below is the touchend code which I had to modify little bit to make it working with jstree so that I can read the values with jstree-hovered class. One tip I want to add is when testing remove all the alerts as it will intefere with the values we read using jQuery.
c._touchEnd = function(f) {
var i = f.originalEvent.changedTouches[0];
var elementFromPoint1 = document.elementFromPoint(i.clientX, i.clientY);
var id=elementFromPoint1.id;
var str=new String(id);
var pos=str.indexOf("dropTarget");
if(pos>=0){
elementFromPoint1.className="jstree-hovered";
}
if (!a) {
return;
}
d(f, "mouseup");
d(f, "mouseout");
if (!this._touchMoved) {
d(f, "click");
}
a = false;
};
Related
I have an input element inside a Jquery-UI selectable element. And I want to fire the blur event when clicking outside the input, but it's not possible, because of the container, the selectable element stops propagating the mousedown.
Example here.
How can I fire the blur event?
I come across these problems a lot while working on complex UI stuff, here give this a try:
http://jsfiddle.net/LNtqE/5/
What the code is doing is registering a psuedo-blur event to the document that will only fire once, then unbind itself. The event will only fire if the target is NOT the input that registered it... this could work for all inputs, or specific ones depending on what you feed to the selector :)
$(document).ready(function(){
$('#selectable').selectable({});
$("input").on("focus", function(e) {
var $input = $(this);
$(document).on("mouseup", function(e2) {
if( !$(e2.target).is( $input )) {
$input.trigger("blur");
$(this).off(e2);
}
});
});
});
I would like to drag a svg element onto HTML element.
Not sure what a smart way to do so.
However, I think my method is dirty, but I think I can start drag from svg element with d3.behavior.drag() and on drag function of d3, I am going to clone a copy(please think it is simply a circle object) and let jquery ui handle the drag events.
The problem is I don't know how to trigger drag event on newly created jquery element.
var drag= d3.behavior.drag()
.on("drag", function(d) {
// make a Clone html object .dragging-node
$('.dragging-node').attr('draggable', true);
$('.dragging-node').trigger('dragstart');
});
var node = vis.selectAll("g.node")
.data(nodes)
.enter().append("svg:g")
.attr("class", "node")
.call(drag);
Any idea how to start drag for this newly created clone object?
Or is there any smarter way to get what I want?
Any help would be appreciated!
I did something like this once, and it worked ok for simple stuff, but after some time it became clear that using jQueryUI's Draggable is saner, since it's much more robust. I also needed to use Droppable functionality in conjunction; maybe your needs are less demanding. If so:
You don't need to artificially trigger events from the cloned element (aka "drag helper" in jQueryUI's draggable terminology). Instead, let the events continue to be triggered on the element that initiated the drag and has the drag behavior applied to it, but update the helper's position.
Something like this:
// Helper is the cloned element, which doesn't exist until dragging begins
// (alternatively it could pre-exist but be hidden)
var $helper = null
// the parent container of $helper,
// which presumably is outside of the SVG
var $helperParent = $('body')
var drag = d3.behavior.drag()
.on("dragstart", function(d) {
$helper = ... // somehow make the cloned helper, on dragstart (not on drag)
.appendTo($helperParent)
})
.on("drag", function(d) {
// determine the mouse position relative to the helper's parent
// (not relative to the SVG element that initiated the drag)
mousepos = d3.mouse($helperParent[0])
// update the helper's position
$helper.css({
left: mousepos[0],
top: mousepos[1]
});
})
.on("dragend", function(d) {
// remove (or hide) the helper
$helper.remove();
});
I'm trying to fire an event programmatically. My problem is that I have two SVG on two DIVs and I want to be able to change the border of the DIV I have clicked. To do that I thought to pass the DIV inside my classes and then trigger a click on it once I click on anything. (if there is a better way, please tell me)
I have the following code:
div = querySelector(divName);
svgElement = new svg.SvgSvgElement();
div.append(svgElement);
div.onClick.listen(_setBorders(1));
later I pass the svgElement to another class
ell.show(svgElement);
where show is
show(svg.SvgElement element) {
if (element.parent is DivElement){
_parentDiv= element.parent as DivElement;
element.children.add(_group);
}
}
_parentDiv is of course a DivElement, which I use for an internal onClick()
_onClick(MouseEvent e) {
window.console.info("onClick Ell");
_parentDiv.click();
}
I'm expecting to see the _setBorders(1); I defined with the main div, but it doesn't work. The weird thing is that when I check with the debugger set to the _parentDiv.click() I see that _parentDiv has the event correctly set.
I suppose click() doesn't work as I expected. Any Idea?
If you want that _setBorders(1) is called on click events you have to use :
div.onClick.listen((_) => _setBorders(1));
I try to show context menu jstree on hover event with using api context menu plugin, but it doesn't work. Have you any idea how to do this?
I had to implement the same thing. Here's what I ended up doing:
var $treeView = "myTreeList";
$treeView.jstree({
/* options */
})
.on('loaded.jstree', function() {
$(".myTreeList a").hover(
function(){
$treeView.jstree("show_contextmenu", $(this));
}
);
})
I just hooked up a hover event to every anchor in the tree when the loaded event fired (don't try to use the li elements or the event on a child will fire along with all it's ancestors). You could also use "on" instead of just hover and you wouldn't need to do this in the loaded event handler but that's what worked for me.
I create a new jQuery element after the mouse is in a down position and before it is released. (After mousedown).
I would like to programmatically trigger dragging on the new element using jQuery UI, so that it will automatically begin dragging with my mouse movement. I don't want to have to release and then click the mouse again.
I have tried the following...
var element = $("<div />");
element.appendTo("body").draggable().trigger("mousedown");
...however this does not work.
Does anyone have any suggestions on how to accomplish this?
UPDATE: After some searching the poster of this question has the identical problem. However the suggested solution, which boils down to...
$("body").on("mousedown", function(e) {
$("<div />").draggable().appendTo("body").trigger(e);
});
...no longer works in the latest versions jQuery and jQuery-UI, and instead generates a Maximum Call Stack Exceeded error.
The draggable plugin expects its mousedown events to use its namespace and to point to the draggable object as the target. Modifying these fields in the event works with jQuery 1.8.3 and jQuery UI 1.9.2.
$("body").on("mousedown", function(e) {
var div = $("<div />").draggable().appendTo("body");
e.type = "mousedown.draggable";
e.target = div[0];
div.trigger(e);
});
Demo here: http://jsfiddle.net/maCmB/1/
UPDATE:
See fuzzyBSc's answer below. It's the proper way to do this.
This is totally a hack, but it seems to do the trick:
var myDraggable = $('#mydraggable').draggable();
// Yeah... we're going to hack the widget
var widget = myDraggable.data('ui-draggable');
var clickEvent = null;
myDraggable.click(function(event){
if(!clickEvent){
widget._mouseStart(event);
clickEvent = event;
}
else {
widget._mouseUp(event);
clickEvent = null;
}
});
$(document).mousemove(function(event){
console.log(event);
if(clickEvent){
// We need to set this to our own clickEvent, otherwise
// it won't position correctly.
widget._mouseDownEvent = clickEvent;
widget._mouseMove(event);
}
});
Here's the plunker
My example uses an element that already exists instead of creating one, but it should work similarly.
Create your draggable function on mouseover
$('#futureDragableElement').mouseover(function() {
$(this).draggable();
});
As the draggable initialization has already be done, your first mouse click will be taken into account
You have to bind the mousedown event to the element in question, then you can trigger the event.
From http://api.jquery.com/trigger/
Any event handlers attached with .bind() or one of its shortcut
methods are triggered when the corresponding event occurs. They can be
fired manually, however, with the .trigger() method. A call to
.trigger() executes the handlers in the same order they would be if
the event were triggered naturally by the user:
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
Hacks are not needed if you are creating the element during the event and that element is not too complicated. You can simply set draggable to the element that mousedown occurs and use draggable helper property to create a helper that is going to be your new element. On dragStop clone the helper to the location in dom you want.
$('body').draggable({
helper: function() {
return '<div>your newly created element being dragged</div>';
},
stop: function (e,ui) {
ui.helper.clone().appendTo('body');
}
});
Of course you would need to set position for the helper, so mouse is on it. This is just a very basic example.