Documentation
http://api.jqueryui.com/draggable/ and
http://jqueryui.com/droppable/
draggablewith slider
http://jqueryui.com/slider/
http://api.jqueryui.com/slider/
Copy the following code in .php file and see the demo
<script src="//code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.0/jquery-ui.js?ver=1.3.3"></script>
Bar
<div class="bar_area">
<div class="color_indicator"></div>
<div class="draggable draggable_element">
<img src="draggable_icon.png" alt="Icon"/>
</div>
</div>
<div style="margin-top: 15px;">
Value: <input name="draggable_value" type="text" value="5" size="3"/>
</div>
<style>
.bar_area {
width: 125px; position:relative;
border-radius: 10px 10px 10px 10px;
margin-top: 10px;
background: #ccc;
}
.draggable {
width: 25px;
position: absolute;
top: -8px !important;
}
.color_indicator{
background: #BD4967;
border-radius: 10px 10px 10px 10px;
height: 10px;
width: 40px;
}
.draggable_element{
left: 40px;
}
</style>
<script>
jQuery( ".draggable_element" ).draggable({
containment: 'parent',
scroll: true,
scrollSensitivity: 100,
drag: function( event, ui ) {
var total_w = jQuery(this).parent().width();
var total_slice = 10;
var per_slice_w = parseInt(total_w / total_slice);
var bar_area_left = jQuery(this).parent().offset().left;
var pixel_difference = jQuery(this).offset().left - bar_area_left;
var current_slice = Math.ceil(pixel_difference / per_slice_w);
jQuery('input[name="draggable_value"]').val(current_slice + 1);
jQuery(this).siblings('.color_indicator').width(pixel_difference+3);
},
stop: function( event, ui ) {
}
});
</script>
ui slider
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div class="age-range-content">
<div id="slider-range"></div>
<span id="age-from">18</span> -
<span id="age-to">40+</span>
<input class="age_minimum" name="ar[age_minimum]" type="hidden" value="" size="3"/>
<input class="age_maximum" name="ar[age_maximum]" type="hidden" value="" size="3"/>
</div>
<style>
#slider-range
{
width: 557px;
margin-left: 34px;
}
#slide-rrange div{
margin-left: 5px;
}
#age-to
{
padding-top: 5px;
display: inline-block;
}
</style>
<a href="javascript:(0)"
<script>
$(function() {
var sliderSetup = {};
sliderSetup.min = 18;
sliderSetup.max = 41;
$( "#slider-range" ).slider({
range: true,
min: 18,
max: 41,
step: 1,
values: [ sliderSetup.min, sliderSetup.max ],
slide: function( event, ui ) {
var age_max_value = ui.values[1];
if(age_max_value > 40){
age_max_value = '40+';
}
$( "#age-from" ).html( ui.values[ 0 ]);
$( "#age-to" ).html(age_max_value);
$( ".age_minimum" ).val( ui.values[ 0 ]);
$( ".age_maximum" ).val(age_max_value);
},
change: function( event, ui ) {
var age_from = ui.values[0];
var age_to = ui.values[1];
if(age_to > 40){
age_to = '40+';
}
$( ".age_minimum" ).val(age_from);
$( ".age_maximum" ).val(age_to);
}
});
var age_max = $( "#slider-range" ).slider( "values", 1 );
if(age_max > 40){
age_max = '40+';
}
$( "#slider-range .ui-slider-handle" ).unbind('keydown');
$( "#age-from" ).html( $( "#slider-range" ).slider( "values", 0 ));
$( "#age-to" ).html(age_max);
$( ".age_minimum" ).val( $( "#slider-range" ).slider( "values", 0 ));
$( ".age_maximum" ).val(age_max);
});
</script>
jQuery Drag and Drop on touch devices (iPad, Android)
Paste this at the beginning of your .js file:
(function ($) {
// Detect touch support
$.support.touch = 'ontouchend' in document;
// Ignore browsers without touch support
if (!$.support.touch) {
return;
}
var mouseProto = $.ui.mouse.prototype,
_mouseInit = mouseProto._mouseInit,
touchHandled;
function simulateMouseEvent (event, simulatedType) { //use this function to simulate mouse event
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault(); //use this to prevent scrolling during ui use
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
// Initialize the simulated mouse event using the touch event's coordinates
simulatedEvent.initMouseEvent(
simulatedType, // type
true, // bubbles
true, // cancelable
window, // view
1, // detail
touch.screenX, // screenX
touch.screenY, // screenY
touch.clientX, // clientX
touch.clientY, // clientY
false, // ctrlKey
false, // altKey
false, // shiftKey
false, // metaKey
0, // button
null // relatedTarget
);
// Dispatch the simulated event to the target element
event.target.dispatchEvent(simulatedEvent);
}
mouseProto._touchStart = function (event) {
var self = this;
// Ignore the event if another widget is already being handled
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
return;
}
// Set the flag to prevent other widgets from inheriting the touch event
touchHandled = true;
// Track movement to determine if interaction was a click
self._touchMoved = false;
// Simulate the mouseover event
simulateMouseEvent(event, 'mouseover');
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
// Simulate the mousedown event
simulateMouseEvent(event, 'mousedown');
};
mouseProto._touchMove = function (event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Interaction was not a click
this._touchMoved = true;
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
};
mouseProto._touchEnd = function (event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Simulate the mouseup event
simulateMouseEvent(event, 'mouseup');
// Simulate the mouseout event
simulateMouseEvent(event, 'mouseout');
// If the touch interaction did not move, it should trigger a click
if (!this._touchMoved) {
// Simulate the click event
simulateMouseEvent(event, 'click');
}
// Unset the flag to allow other widgets to inherit the touch event
touchHandled = false;
};
mouseProto._mouseInit = function () {
var self = this;
// Delegate the touch handlers to the widget's element
self.element
.on('touchstart', $.proxy(self, '_touchStart'))
.on('touchmove', $.proxy(self, '_touchMove'))
.on('touchend', $.proxy(self, '_touchEnd'));
// Call the original $.ui.mouse init method
_mouseInit.call(self);
};
})(jQuery);
http://api.jqueryui.com/draggable/ and
http://jqueryui.com/droppable/
draggablewith slider
http://jqueryui.com/slider/
http://api.jqueryui.com/slider/
Copy the following code in .php file and see the demo
<script src="//code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.0/jquery-ui.js?ver=1.3.3"></script>
Bar
<div class="bar_area">
<div class="color_indicator"></div>
<div class="draggable draggable_element">
<img src="draggable_icon.png" alt="Icon"/>
</div>
</div>
<div style="margin-top: 15px;">
Value: <input name="draggable_value" type="text" value="5" size="3"/>
</div>
<style>
.bar_area {
width: 125px; position:relative;
border-radius: 10px 10px 10px 10px;
margin-top: 10px;
background: #ccc;
}
.draggable {
width: 25px;
position: absolute;
top: -8px !important;
}
.color_indicator{
background: #BD4967;
border-radius: 10px 10px 10px 10px;
height: 10px;
width: 40px;
}
.draggable_element{
left: 40px;
}
</style>
<script>
jQuery( ".draggable_element" ).draggable({
containment: 'parent',
scroll: true,
scrollSensitivity: 100,
drag: function( event, ui ) {
var total_w = jQuery(this).parent().width();
var total_slice = 10;
var per_slice_w = parseInt(total_w / total_slice);
var bar_area_left = jQuery(this).parent().offset().left;
var pixel_difference = jQuery(this).offset().left - bar_area_left;
var current_slice = Math.ceil(pixel_difference / per_slice_w);
jQuery('input[name="draggable_value"]').val(current_slice + 1);
jQuery(this).siblings('.color_indicator').width(pixel_difference+3);
},
stop: function( event, ui ) {
}
});
</script>
ui slider
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div class="age-range-content">
<div id="slider-range"></div>
<span id="age-from">18</span> -
<span id="age-to">40+</span>
<input class="age_minimum" name="ar[age_minimum]" type="hidden" value="" size="3"/>
<input class="age_maximum" name="ar[age_maximum]" type="hidden" value="" size="3"/>
</div>
<style>
#slider-range
{
width: 557px;
margin-left: 34px;
}
#slide-rrange div{
margin-left: 5px;
}
#age-to
{
padding-top: 5px;
display: inline-block;
}
</style>
<a href="javascript:(0)"
<script>
$(function() {
var sliderSetup = {};
sliderSetup.min = 18;
sliderSetup.max = 41;
$( "#slider-range" ).slider({
range: true,
min: 18,
max: 41,
step: 1,
values: [ sliderSetup.min, sliderSetup.max ],
slide: function( event, ui ) {
var age_max_value = ui.values[1];
if(age_max_value > 40){
age_max_value = '40+';
}
$( "#age-from" ).html( ui.values[ 0 ]);
$( "#age-to" ).html(age_max_value);
$( ".age_minimum" ).val( ui.values[ 0 ]);
$( ".age_maximum" ).val(age_max_value);
},
change: function( event, ui ) {
var age_from = ui.values[0];
var age_to = ui.values[1];
if(age_to > 40){
age_to = '40+';
}
$( ".age_minimum" ).val(age_from);
$( ".age_maximum" ).val(age_to);
}
});
var age_max = $( "#slider-range" ).slider( "values", 1 );
if(age_max > 40){
age_max = '40+';
}
$( "#slider-range .ui-slider-handle" ).unbind('keydown');
$( "#age-from" ).html( $( "#slider-range" ).slider( "values", 0 ));
$( "#age-to" ).html(age_max);
$( ".age_minimum" ).val( $( "#slider-range" ).slider( "values", 0 ));
$( ".age_maximum" ).val(age_max);
});
</script>
jQuery Drag and Drop on touch devices (iPad, Android)
Paste this at the beginning of your .js file:
(function ($) {
// Detect touch support
$.support.touch = 'ontouchend' in document;
// Ignore browsers without touch support
if (!$.support.touch) {
return;
}
var mouseProto = $.ui.mouse.prototype,
_mouseInit = mouseProto._mouseInit,
touchHandled;
function simulateMouseEvent (event, simulatedType) { //use this function to simulate mouse event
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault(); //use this to prevent scrolling during ui use
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
// Initialize the simulated mouse event using the touch event's coordinates
simulatedEvent.initMouseEvent(
simulatedType, // type
true, // bubbles
true, // cancelable
window, // view
1, // detail
touch.screenX, // screenX
touch.screenY, // screenY
touch.clientX, // clientX
touch.clientY, // clientY
false, // ctrlKey
false, // altKey
false, // shiftKey
false, // metaKey
0, // button
null // relatedTarget
);
// Dispatch the simulated event to the target element
event.target.dispatchEvent(simulatedEvent);
}
mouseProto._touchStart = function (event) {
var self = this;
// Ignore the event if another widget is already being handled
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
return;
}
// Set the flag to prevent other widgets from inheriting the touch event
touchHandled = true;
// Track movement to determine if interaction was a click
self._touchMoved = false;
// Simulate the mouseover event
simulateMouseEvent(event, 'mouseover');
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
// Simulate the mousedown event
simulateMouseEvent(event, 'mousedown');
};
mouseProto._touchMove = function (event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Interaction was not a click
this._touchMoved = true;
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
};
mouseProto._touchEnd = function (event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Simulate the mouseup event
simulateMouseEvent(event, 'mouseup');
// Simulate the mouseout event
simulateMouseEvent(event, 'mouseout');
// If the touch interaction did not move, it should trigger a click
if (!this._touchMoved) {
// Simulate the click event
simulateMouseEvent(event, 'click');
}
// Unset the flag to allow other widgets to inherit the touch event
touchHandled = false;
};
mouseProto._mouseInit = function () {
var self = this;
// Delegate the touch handlers to the widget's element
self.element
.on('touchstart', $.proxy(self, '_touchStart'))
.on('touchmove', $.proxy(self, '_touchMove'))
.on('touchend', $.proxy(self, '_touchEnd'));
// Call the original $.ui.mouse init method
_mouseInit.call(self);
};
})(jQuery);
