I see that there is ol interaction that can be done upon click or single click or pointer move - however, is there one that can be done with mousedown/mouseup? In short, we want the user to be able to edit a feature as long as the mouse button in clicked but saved/stopped upon mouse button release.
featureRotateDown = new ol.interaction.Select({
condition: ol.events.condition.pointerdown
});
featureRotateUp = new ol.interaction.Select({
condition: ol.events.condition.pointerup
});
map.addInteraction(featureRotateDown);
map.addInteraction(featureRotateUp);
featureRotateDown.on('select', function(event) {
$.each(event.selected, function (index, feature) {
console.log(feature);
console.log('1');
});
});
featureRotateUp.on('select', function(event) {
$.each(event.selected, function (index, feature) {
console.log(feature);
console.log('3');
});
});
In other words, imagine a marker placed on a map that is an arrow. I want to ability to rotate it around as much as I want while the cursor is on the marker and the mouse button is pressed down.
Try pointerdown and pointerup:
map.on('pointerdown', function (event) {
// doStuff...
// ALTERNATIVE 1: get a feature at click position (with very small tolerance)
map.forEachFeatureAtPixel(event.pixel, function(feature, layer){
// doStuff with your feature at click position
});
// ALTERNATIVE 2: get the closest feature
closestFeature = yourVectorSource.getClosestFeatureToCoordinate(event.coordinate);
})
map.on('pointerup', function (event) {
// doStuff...
})
In the functions you can access the features using forEachFeatureAtPixelor getClosestFeatureToCoordinate.
Also see this JSFiddle
I have the following setup:
$('.my-list').sortable({
handle: '.drag-handle',
start: function(event, ui ) {
//check to see if allow drag and drop
var should_disable = check-code-goes-here ;
if (should_disable) {
//how to disable
}
},
stop: function(event, ui ) {
}
});
When dragging a .drag-handle element, I need to check a condition to see if it is allowed to be dragged and dropped. If yes, go as normal. If not, I would like to disable the whole drag/drop operation. Note that I cannot determine whether a .drag-handle element should be draggable or not at page load, which is why I need to check at the time of each drag/drop operation.
Thanks and regards.
Check this JSFiddle link
http://jsfiddle.net/shuklendu/uacc7/17/
in that example a class 'fixed' added to item which don't want to drag and cancel property set to sortable by
$("#sortable").sortable({
cancel: ".fixed"
});
I'm dragging sortables from a grey ul list (parent group) to two yellow lists underneath. I am trying to have a hidden button in the grey sortable list appear when dragged into the yellow sortable lists.
I'm using a stupid method of display none and using a mouseUp event handler to make the hidden button appear. It's not achieving the desired effect.
it is also important that the hidden button only appear in the bottom yellow boxes and not appear in the grey sortable lists.
Any help would be much appreciated. Thanks.
http://jsfiddle.net/equiroga/4At6J/4/
//Show js
$(function(){
$(document).mouseup(function(){
$('.button, .button2, .button3, .button4, .button5').show();
});
});
//Sortable js
$(function () {
$("#sortable1").sortable({
helper: "clone",
connectWith: ".sortable",
start: function (event, ui) {
$(ui.item).show();
clone = $(ui.item).clone();
before = $(ui.item).prev();
position = $(ui.item).index();
},
beforeStop: function (event, ui) {
if ($(ui.item).closest('ul#sortable1').length > 0) $(this).sortable('cancel');
},
stop: function (event, ui) {
if (position == 0) $("#sortable1").prepend(clone);
else before.after(clone);
}
});
$(".sortable").sortable({connectWith: ".sortable:not('#sortable1')"});
});
Remove the top code and add this in the stop function:
ui.item.children('.button').show();
EDIT
I added a bt common class to all the buttons and then:
ui.item.children('.bt').show();
http://jsfiddle.net/stevemarvell/4At6J/6/
I am trying to drag an element without keeping the mouse button down.
The behavior I would like is :
I click on a draggable item
Drag my item without keeping mouse left click down : just follow the mouse as a cursor
I click on a droppable container to confirm and append my item
I am able to simulate this behavior if I add an alert box durring the start event.
start : function(){
alert('test')
},
Here is the fiddle : http://jsfiddle.net/QvRjL/103/
How is it possible to code this behavior without the alert box?
Here is a good solution about this problem : Trigger Click-and-Hold Event
http://jsfiddle.net/VXbpu/1/
http://jsfiddle.net/vPruR/70/
var click = false;
$(document).bind('mousemove', function (e) {
if (click == true) {
$('#your_div_id').css({
left: e.pageX,
top: e.pageY
});
}
});
$('#your_div_id').click(function() {
click = !click;
return false;
});
$('html').click(function() {
click = false;
});
is there a way to manually open close the jquery ui tooltip? I just want it to react to a click event toggling on/off. You can unbind all mouse events and it will rebind them when calling .tooltip('open'), even though that should not initialize or set events imo, since if you try to run .tooltip('open') without initializing, it complains loudly about not being initialized.
jltwoo, can I suggest to use two different boolean switches to enable auto-open and auto-close? With this change your code will look like this:
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoShow: true,
autoHide: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
In this way, initializing the tooltip as:
$(someDOM).tooltipX({ autoHide:false });
it shows by itself when the mouse is over the element but you have to manually close it.
If you want to manually control both open and close actions, you can simply use:
$(someDOM).tooltipX({ autoShow:false, autoHide:false });
If you want to just unbind the events and woudn't like to make your own custom tooltip.
$("#some-id").tooltip(tooltip_settings)
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
$("#some-id").attr("title", "Message");
$("#some-id").tooltip("open");
mouseout blocks the tooltop disappearing by moving the mouse cursor
focusout blocks the tooltop disappearing by keyboard navigation
The tooltip have a disable option. Well i used it and here is the code:
$('a').tooltip({
disabled: true
}).click(function(){
if($(this).tooltip('option', 'disabled'))
$(this).tooltip('option', {disabled: false}).tooltip('open');
else
$(this).tooltip('option', {disabled: true}).tooltip('close');
}).hover(function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
}, function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
});
Related to my other comment, I looked into the original code and achieved manual open/close by extending the widget and adding a autoHide option with version JQuery-UI v1.10.3. Basically I just remove the mouse listeners that were added in _create and the internal _open call.
Edit: Separated autoHide and autoShow as two separate flags as suggested by #MscG
Demo Here:
http://jsfiddle.net/BfSz3/
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoHide:true,
autoShow: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
Now when you initialize you can set the tooltip to manually show or hide by setting autoHide : false:
$(someDOM).tooltipX({ autoHide:false });
And just directly perform standard open/close calls in your code as needed elsewhere
$(someDOM).tooltipX("open"); // displays tooltip
$(someDOM).tooltipX("close"); // closes tooltip
A simple hotfix, until I have the time to do official pull request, this will have to do.
Some compilation from other SO questions.
Example
Show tooltip on hint click, and hide tooltip on elsevere click
$(document).on('click', '.hint', function(){ //init new tooltip on click
$(this).tooltip({
position: { my: 'left+15 center', at: 'center right' },
show: false,
hide: false
}).tooltip('open'); // show new tooltip
}).on('click', function(event){ // click everywhere
if(!$(event.target).hasClass('hint'))
$(".hint").each(function(){
var $element = $(this);
if($element.data('ui-tooltip')) { // remove tooltip only from initialized elements
$element.tooltip('destroy');
}
})
});
$('.hint').on('mouseout focusout', function(event) { // prevent auto hide tooltip
event.stopImmediatePropagation();
});