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;
});
Related
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 multiple pages inside a single html.
And I've an external panel that can be swipe in and out (panel can open and close ) in all pages. In one page i have swipe tabs feature.
Both Panel and Swipe Tabs functionality are fine now..
My problem is when i come to swipe tabs page,swiping tabs will also pull the panel too, how to adjust these swipe events?, How to detect swipe tabs and panel swipe events correctly.
Here the DEMO i created, i also need a panel which can also can open and close with swipe events. user can swipe between swipes and swipe to open and close a left panel, panel must be external so it can be available in whole pages.
unfortunately panel not working in the demo i don't know whats happening, but working in my project.
To add the external panel, you can use the regular jQuery document ready:
var panel = '<div data-theme="a" data-role="panel" data-display="overlay" id="leftpanel"><ul data-role="listview"><li data-icon="false"><a data-ajax="false" href="index.html">Home</a></li><li data-icon="false"><a data-ajax="false" href="html/examples.html">Examples</a></li><li data-icon="false"><a data-ajax="false" href="html/custom/version.html">Version 1.0.1</a></li></ul></div>';
$(function () {
$("body").prepend(panel);
$("[data-role=panel]").panel().enhanceWithin();
});
Then you could listen for swipes on the content div to change tabs and on the header div to open/close the panel:
$("div[data-role=content]").on("swipeleft", function (event) {
changeNavTab(true);
});
$("div[data-role=content]").on("swiperight", function (event) {
changeNavTab(false);
});
// Navigation Drawer Swipe Listener
$("div[data-role=header]").on("swipeleft swiperight", function (e) {
// save swipe direction right/left
var dir = 'prev';
if (e.type == 'swiperight') {
dir = 'next';
}
if (dir == 'prev') {
$('#leftpanel').panel('close');
} else {
$('#leftpanel').panel('open');
}
});
Updated FIDDLE
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 trying to integrate this plug-in into my site so I can swipe to delete. The problem however is that this plugin is triggered with a 'swiperight', the same swipe event is used to reveal my panel. I managed to separate the events using event.target.tagName. When it's a A(link), I want to activate the swipe to delete button and otherwise I want my panel to slide in.
With other words the pageinit event is triggered twice so the swipe to delete button starts to appear then the same event is triggered again. I want to somehow cancel one action but i can't make it work. I already tried:
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
I also tried to use some solutions given here but with no luck:
jQuery Mobile: document ready vs page events
A demo of my problem can be found snip and my current pageinit function is this:
$(document).on('pageinit', function() {
//Activate horizontal swipe after x px.
$.event.special.swipe.horizontalDistanceThreshold = 80;
$('div[data-role="content"]').on("swiperight", function(event) {
//If tagname is 'A' you probably want slide to delete not the panel
if(event.target.tagName != 'A') {
$.mobile.activePage.find("#menu").panel("open");
} else {
//Cancel swipe
event.stopImmediatePropagation();
}
});
//Swipe to delete
$("#swipe li").swiper( {
corners: false,
label: "Verwijder",
swipe: function(event, ui) {
alert('trigger');
},
click: function(event, ui) {
var $item = $(this);
//console.log($(this));
$item.fadeOut(250, function() {
$item.remove();
});
}
});
});
Fixed issue using the following plugin: TouchSwipe which has the ability to simple exclude elements from the events.
If I disable jQueryUI button using "disabled" option, button goes dim.
But I don't want it that way - I just want it unresponsive and styled in its original layout - no rollovers, no clicks - everything dead.
Unbinding button click from button doesn't help.
Unbinding all events from button using unbind() just as well.
Any ideas?
In fact, you could just remove the "disabled" classes after disabling the button:
$( "button" ).button();
$( "button" ).button('disable');
$( "button" ).removeClass('ui-button-disabled ui-state-disabled')
Here is a fiddle : http://jsfiddle.net/9gq9n/
Ok, at last I figured it out.
To disable any jQueryUI button, including 'buttonized' checkbox with label attached (while retaining its original layout), you have to do the following:
unbind its events
unbind events from its label(s)
So, here's an example:
$("mybuttons").unbind();
$("mybuttons").getLabels().unbind();
I'm using a plugin I recently wrote (originally by SO member Gijs, but didn't work always...)
jQuery.fn.getLabels = function () {
return this.map(function () {
var parentLabels = $(this).parents('label').get();
var associatedLabels = this.id ? associatedLabels = $("label[for='" + this.id + "']").get() : [];
return parentLabels.concat(associatedLabels);
});
};
Hope it helps.