I have searched a lot but i could not find any solution for this or may be i was unable to find good keywords for the question.
I am working on an audio player and the problem is volume control.
Here is my code the dragging function should only occur when mousedown function is working otherwise it should not work , but it does not disable onmousemove event on leaving the mouse button so i need your help..
$(document).ready(function(){
$(".volume_wrapper_slider").on("mousedown", function(e) {
$(this).on("mousemove", function(e) {
isDragging = true;
var slider_width = $(this).width();
var slider_offset = $(this).offset().left;
var percentage1 = (100 / slider_width);
var current_percentage = percentage1 * (e.clientX-slider_offset);
// move the bar w.r.t click
$(".vol_slided").width(current_percentage+"%");
now_playing.volume = parseFloat(percentage1 * ($(".vol_slided").width()/100));
});
});
// mouse up
$(".volume_wrapper_slider").mouseup(function(e) {
e.stopPropagation();
});
});
Update -----------------------------
this solved my problem thanks to #jaromanda-x
// volume control
$(document).ready(function(){
$(".volume_wrapper_slider").on("mousedown", function(e) {
canDrag = true;
$(this).on("mousemove", function(e) {
if (canDrag == true) {
var slider_width = $(this).width();
var slider_offset = $(this).offset().left;
var percentage1 = (100 / slider_width);
var current_percentage = percentage1 * (e.clientX-slider_offset);
// move the bar w.r.t click
$(".vol_slided").width(current_percentage+"%");
now_playing.volume = parseFloat(percentage1 * ($(".vol_slided").width()/100));
}
});
// mouse up
$(".volume_wrapper_slider").mouseup(function(e) {
canDrag = false;
});
});
});
that worked for me..
// volume control
$(document).ready(function(){
$(".volume_wrapper_slider").on("mousedown", function(e) {
canDrag = true;
$(this).on("mousemove", function(e) {
if (canDrag == true) {
var slider_width = $(this).width();
var slider_offset = $(this).offset().left;
var percentage1 = (100 / slider_width);
var current_percentage = percentage1 * (e.clientX-slider_offset);
// move the bar w.r.t click
$(".vol_slided").width(current_percentage+"%");
now_playing.volume = parseFloat(percentage1 * ($(".vol_slided").width()/100));
}
});
// mouse up
$(".volume_wrapper_slider").mouseup(function(e) {
canDrag = false;
});
});
});
I want to be able to click on a canvas, move it to the map, drop it on the map. After dropping it on the map, they can select the canvas on the map and move it again. The process is repeated. I have trouble with the ignoreMouseMove variable, it does not reset to false and is always true
Here is link to the demo: https://pokemon-map-electro2k.c9users.io/index.html
var moveCanvas = function ($canvas, e) {
$(".map ul li." + $canvas).offset({
left: e.pageX - 30,
top: e.pageY - 30
});
};
// When user first click on canvas
var onmousemove = function ($canvas) {
var ignoreMouseMove = false;
// Make canvas follow cursor in the map area
$(".map").mousemove(function (e) {
if (ignoreMouseMove) return; // event handling mousemove is "disabled"
moveCanvas($canvas, e);
}).click(function () {
// "re-enable" mousemove
ignoreMouseMove = true;
// When canvas is click on again within the map area, make canvas follow cursor
$(".map ul li").click(function () {
$(".map").mousemove(function (e) {
if (!ignoreMouseMove) return;
moveCanvas($canvas, e);
}).click(function () {
// Click function does not work anymore. ignoreMouseMove can't be reset. It is always true
ignoreMouseMove = false;
})
});
});
};
Instead of using .off(), use a boolean variable which indicates whether you want to ignore the mousemove event or not, but keeping the mousemove event handler in place:
var onmousemove = function ($canvas) {
var ignoreMouseMove = false;
// Make canvas follow cursor in the map area
$(".map").mousemove(function (e) {
if (ignoreMouseMove) return; // event handling is "disabled"
$(".map ul li." + $canvas).offset({
left: e.pageX,
top: e.pageY
});
}).click(function () {
ignoreMouseMove = true;
$(".map ul li").click(function () {
// "re-enable" mousemove
ignoreMouseMove = false;
});
});
};
function initDrag(event)
{
var lastOffset = context.getElementTranslation(element);
// Get initial coordinates for (x,y)
initialX = event.pageX;
initialY = event.pageY;
// Determine last offset points for (x,y)
lastOffsetX = lastOffset ? lastOffset[0] : 0;
lastOffsetY = lastOffset ? lastOffset[1] : 0;
startOffsetX = initialX - lastOffsetX;
startOffsetY = initialY - lastOffsetY;
event.stopPropagation();
event.preventDefault();
elem.className = elem.className + ' draggable';
document.documentElement.addEventListener('mousemove', doDrag, false);
document.documentElement.addEventListener('mouseup', stopDrag, false);
}
jQuery('.classname').on('click', function(event)
{
alert(23);
jQuery('.medium-editor-button-first').attr('style','');
if(!event.shiftKey)
{
if(layer.hasClass('layer_selected'))
{
event.stopPropagation();
return false;
}
context.deselectAllLayers();
context.setLayerSelected(layerId);
}
else
{
/*if(jQuery('.layer_selected').length < 1 )
{
context.deselectAllLayers();
}*/
if(layer.hasClass('layer_selected'))
{
layer.removeClass('layer_selected multiSelectLayers');
context.initializeMultiSelect(layer);
event.stopPropagation();
return false;
}
context.selectors.multiSelect.removeClass('layer_selected');
}
layer.find('.tp-caption').focus();
layer.addClass("layer_selected");
context.initializeMultiSelect(layerId);
event.stopPropagation();
});
After each mouse up click function fire. I want to prevent this click event. I tried event.stopPropagation(); and event.preventDefault(); but didn't work.
Thanks in advance.
I'm making a context menu, but there a problem for my context menu, when I right click I wish the context menu stop on the position. I have tried using .stop() but it doesn't work.
This is the JS Fiddle
JQUERY
$(".menu").hide();
$(document).on("contextmenu", ".element", function (e) {
$(".menu").fadeIn();
return false;
});
$(document).mouseup(function (e) {
$(".menu").fadeOut(300);
});
$(document).bind('mousemove', function(e){
$('.menu').css({
left: e.pageX + 20,
top: e.pageY
});
$(".menu").stop();
});
Here's one approach where you check if the menu is visible and don't move it if it is.
var $menu = $(".menu").hide();
$(document).on("contextmenu", ".element", function (e) {
$menu.fadeIn();
return false;
});
$(document).mouseup(function (e) {
$menu.fadeOut(300);
});
$(document).bind('mousemove', function (e) {
if ($menu.is(':visible')) {
return;
}
$menu.css({
left: e.pageX + 20,
top: e.pageY
});
});
DEMO
Alternatively you can use the contextmenu event to set menu position without using mousemove.
$(document).on("contextmenu", ".element", function (e) {
$menu.css({
left: e.pageX + 20,
top: e.pageY
}).fadeIn();
return false;
});
DEMO 2
Here is the jQuery code that I have written to drag multiple items at a time. It is draggable now but not droppable.
here is the code
$(document).on('click', function (e) {
var target = e.target;
if (!$(target).hasClass('a')) $('.selected').removeClass('selected');
});
$(document).delegate('.a', 'dblclick', function (e) {
$(this).addClass('selected');
});
$(document).delegate('.selected', 'mousedown', function (e) {
var div = $('<div></div>');
$('.selected').each(function () {
div.append($(this).clone());
});
div.prop('id', 'currentDrag');
$('#currentDrag').css({
left: e.pageX + "px",
top: e.pageY + "px"
});
$('body').append(div);
});
$(document).on('mouseup', function (e) {
var tgt = e.target;
var mPos = {
x: e.pageX,
y: e.pageY
};
$('.drop').each(function () {
var pos = $(this).offset(),
twt = $(this).width(),
tht = $(this).height();
});
if((mPos.x > pos.left) && (mPos.x < (pos.left + twt)) && (mPos.y > targPos.top) && (mPos.y < (pos.top + tht))) {
$(this).append($('#currentDrag').html());
}
$('.drop .selected').removeClass('selected');
$('#currentDrag').remove();
});
$('.drop').on('mouseup', function (e) {
$(tgt).append($('#currentDrag').html());
$('.drop .selected').removeClass('selected');
$('#currentDrag').remove();
});
$(document).on('mousemove', function (e) {
$('#currentDrag').css({
left: e.pageX + "px",
top: e.pageY + "px"
});
});
What is the pronblem with my code and how can I achieve this. here is the fiddle http://jsfiddle.net/mDewr/27/
I would really recommend trying to find a way to make the jQuery UI draggable and droppable libraries work for you. Then the question becomes,
similar to this one: How do I drag multiple elements with JavaScript or jQuery?.
Here's how we can apply one of the answers from that question to your problem. I'm using the jQuery UI multiple draggable plugin, the entire script of which can be found here: jquery.ui.multidraggable-1.8.8.js.
First let's simplify your HTML. By putting our draggable and dropable divs inside of elements, we don't have to apply redundant stylings to each one. Instead we can use the containing element to style
HTML
<div id="parent">
<div id="dragTargets">
<div>123</div>
<div>456</div>
<div>789</div>
</div>
<div id='dropTargets'>
<div></div>
<div></div>
</div>
</div>
Using the plugin we can call multidraggable on each of the drag divs. And droppable anywhere they can be dropped
JavaScript
$("#dragTargets div").multidraggable();
$("#dropTargets div").droppable();
Customize
We can control the appearance with styling. As an example, we'll make anything that can receive drops yellow, anything you're about to drop as red, and anything that has received an element green.
Here's some styling as an example in CSS
.ui-state-highlight { background: green; }
.ui-state-active { background: yellow; }
.ui-state-hover { background: red; }
And we'll control when these classes are applied with JavaScript:
$("#dropTargets div").droppable({
activeClass: "ui-state-active",
hoverClass: "ui-state-hover",
drop: function () {
$(this).addClass("ui-state-highlight")
}
});
Multi-Draggable
You should style the elements that are currently selected. The script will apply the class ui-multidraggable to all the currently selected elements. The following CSS will make it apparent to the user that their choice is selected.
.ui-multidraggable {
background: tan;
}
Check out this demo. Just hold down ctrl to select more than one of the divs and then drag all of them at once.
jsFiddle
There are few errors in you code. You can check errors on browser console.
To check elements over droppable area, you should check the drop area in the each loop, rather than after each loop. When moving mouse, you should better turn off selection to avoid selected text flashing
$(document).on('click', '.a', function (e) {
$(this).removeClass('selected');
});
$(document).on('dblclick', '.a', function (e) {
$(this).toggleClass('selected');
});
$(document).on('mousedown', '.selected', function (e) {
var dragMode = true;
var div = $('<div></div>');
$('.selected').each(function () {
div.append($(this).clone());
});
div.prop('id', 'currentDrag');
$('#currentDrag').css({
left: e.pageX + "px",
top: e.pageY + "px"
});
$('body').append(div);
//disable selection on dropping start
disableSelection();
$(document).on('mousemove.drop', function(e){
onDragging(e, dragMode);
});
$(document).on('mouseup.drop', function(e){
onDragEnd(e, dragMode);
});
});
function onDragEnd(e, dragMode){
if(!dragMode)
return;
var tgt = e.target;
var mPos = {
x: e.pageX,
y: e.pageY
};
$('.drop').each(function () {
var pos = $(this).position(),
twt = $(this).width(),
tht = $(this).height();
if((mPos.x > pos.left) &&
(mPos.x < (pos.left + twt)) &&
(mPos.y > pos.top) &&
(mPos.y < (pos.top + tht))) {
$(this).append($('#currentDrag').html());
}
});
$('.drop .selected').removeClass('selected');
$('#currentDrag').remove();
$('.onDrop').removeClass('onDrop');
//remove listener on docuemnt when drop end
$(document).off('mousemove.drop');
$(document).off('mouseup.drop');
//enable selection
enableSelection();
}
function onDragging(e, dragMode){
if(!dragMode)
return;
var p = $('body').offset();
var mPos = {
x: e.pageX,
y: e.pageY
};
$('#currentDrag').css({
left: mPos.x,
top: mPos.y
});
$('.drop').each(function () {
var pos = $(this).position(),
twt = $(this).width(),
tht = $(this).height();
$(this).toggleClass("onDrop",
(mPos.x > pos.left)
&& (mPos.x < (pos.left + twt))
&& (mPos.y > pos.top)
&& (mPos.y < (pos.top + tht))
);
});
}
function disableSelection(){
$(document).on("selectstart", function(){ return false; });
//firefox
$("body").css("-moz-user-select", "none");
}
function enableSelection(){
$(document).off("selectstart");
//firefox
$("body").css("-moz-user-select", "");
}
I updated your code: http://jsfiddle.net/mDewr/46/, may can help you.
There were several errors, which I'll not list now, but you can compare the old version with the new one.
$(document).on('dblclick', '.a', function (e) {
$(this).toggleClass('selected');
});
$(document).on('mousedown', '.selected', function (e) {
var div = $('<div id="currentDrag"></div>');
$('.selected').each(function () {
div.append($(this).clone(true));
});
var p = $('body').offset();
var l = e.pageX - p.left;
var t = e.pageY - p.top;
console.log(l, ', ', t);
$('body').append(div);
$('#currentDrag').css({
left: l,
top: t
});
});
$(document).on('mouseup', '.selected', function (e) {
$('.d').each(function(index, item){
var $i = $(item);
if (e.pageX >= $i.offset().left &&
e.pageX <= $i.offset().left + $i.width() &&
e.pageY >= $i.offset().top &&
e.pageY <= $i.offset().top + $i.height()) {
console.log('Dropped');
var $cl = $('#currentDrag').find('>*').clone(true);
$i.append($cl);
}
});
$('.selected').removeClass('selected');
$('#currentDrag').remove();
});
$(document).on('mousemove', function (e) {
var p = $('body').offset();
$('#currentDrag').css({
left: e.pageX - p.left,
top: e.pageY - p.top
});
});
http://jsfiddle.net/mDewr/43/
Everything should work perfectly in this version (this is an update).
PS: I've changed to 1.7+ jQuery, but you can easily change it back to <1.7. Also you don't need custom attributes, use css classes instead.