How can I dragg an image with combobox below using jquery draggable.
I don't know if I need to create a Div and inside put the image and combobox.
I already have the image draggable, but I'm not sure how can I put the combobox below.
It's hard to tell without any code listed, but here is the setup from the draggable docs:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
It seems as though you would need the box below the element with id "draggable". You can set the box to be droppable the same way you use $( "#draggable" ).draggable();
But again, a code sample would be very helpful.
Related
I am working on a site your can see the demo here https://masborn.com/theretreatpalmdubai/
The data picker is calendar is not working here.
jQuery(function () {
jQuery("#bookdate").daterange({
showButtonPanel: true,
closeText: "X",
onClose: function () {
jQuery(".bookinginputs").css("display", "block");
},
onSelect: function (){
jQuery("#demodate").css("display", "none");
jQuery(".ui-datepicker-close").css("display", "none");
}
});
});
I have spend many time on it and not find what is the issue here. Can any one give some input?
From the jquery ui documentation, its called "datepicker" not "daterange".
Also, consider using the $ shortcut instead of jQuery, it makes it easier to read.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
I have this input type date in here and currently, the datepicker will only show once the user clicks the arrow down button in its field. What I want to happen is that, open the datepicker every time the user clicks the input field.
<input type="date" id="date_of_purchase" name="date_of_purchase" class="input-field input-date" placeholder="Inköpsdatum">
from the jQuery UI page for datepicker:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
EDIT
Creating a datepicker with fall back on jquery
I want to active the draggable and resizable function in jquery when (and only) the ctrl+alt button is pressed and disable when it's released and I wrote this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#para {
width: 150px;
height: 150px;
padding: 0.5em;
}
.ui-resizable-helper {
border: 2px dotted #00F;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(e) {
if (e.ctrlKey || e.altKey) {
$("#para").draggable();
$("#para").resizable({
helper: "ui-resizable-helper"
});
}
});
</script>
</head>
<body>
<div id="para" class="ui-widget-content">
<h1 contenteditable>Header</h1>
<hr />
<p contenteditable>paragraph</p>
</div>
</body>
</html>
After I finished this code I tried to press ctrl+alt in the browser but it doesn't work, I've removed the if (e.ctrlKey || e.altKey) logic part and it works successfully but as I replace the logic statement back there it doesn't work
How do I solve this?
You'll need an event handler to catch the keypresses.
You can initialize the plugin as disabled and then enable it when the keys are pressed, and disable it again when the keys are released
$(function() {
$("#para").draggable({
disabled : true
});
$("#para").resizable({
helper : "ui-resizable-helper",
disabled : true
});
$(document).on({
keydown : function(e) {
if (e.ctrlKey && e.altKey) {
$("#para").draggable( "enable" );
$("#para").resizable( "enable" );
}
},
keyup : function() {
$("#para").draggable( "disable" );
$("#para").resizable( "disable" );
}
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#para {
width: 150px;
height: 150px;
padding: 0.5em;
}
.ui-resizable-helper {
border: 2px dotted #00F;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="para" class="ui-widget-content">
<h1 contenteditable>Header</h1>
<hr />
<p contenteditable>paragraph</p>
</div>
</body>
</html>
There are countless jquery plugin for this. But I found none that work in Edge, Chrome, Firefox and Safari, mouse and touch. Do you know a proper stable solution?
It doesn't have to be jquery based. Can be also native JS.
Thanks #Alexis, with your hint I figured out a solution that seems to work. Here the core functionality:
var drag = false;
$('#map').on( "mousedown touchstart", function(e){
drag = true;
console.log('start');
});
$('#map').on( "touchmove", function(e){
if (e.targetTouches.length == 1 && drag == true) {
var touch = e.targetTouches[0];
console.log(touch);
}
});
$('#map').on( "mousemove", function(e){
if (drag == true) {
console.log(e.pageX);
}
});
$('#map').on( "mouseup touchend", function(e){
drag = false;
console.log('end');
});
jQuery UI drag n drop is cross-browser as far as i know :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
js fiddle :
https://jsfiddle.net/riazxrazor/swepy32t/
I am trying to use SapUI5 and JQuery $("#draggable").draggable(); function to drag some div around my html page.
problem is - they interfere with each other - SAPUI5 library also have a varibale named draggable (I want to use JQuery draggable() function).
as a result I get Uncaught TypeError: $(...).draggable is not a function(…)
how to solve it? my code is below.. It simulates the problem. notice that once I remove the script tag of SAPUI5 it is working fine and I can drag the div..
Thanks in advance!
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Draggable - Default functionality</title>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script id='sap-ui-bootstrap'
type='text/javascript'
src='https://sapui5.hana.ondemand.com/1.38.10/resources/sap-ui-core.js'
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.m,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal"
>
</script>
<script>
$(function() {
$("#draggable").draggable();
} );
</script>
</head>
<body>
<div id="draggable">
<p>Drag me around</p>
</div>
</body>
</html>
You should move the Jquery scripts at the bottom
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Draggable - Default functionality</title>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px; }
</style>
<script id='sap-ui-bootstrap'
type='text/javascript'
src='https://sapui5.hana.ondemand.com/1.38.10/resources/sap-ui-core.js'
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.m,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal"
>
</script>
<script>
$(function() {
$("#draggable").draggable();
} );
</script>
</head>
<body>
<div id="draggable">
<p>Drag me around</p>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>
Other option is to import the thirdparty libraries.
<script>
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
$(function() {
$("#draggable").draggable();
} );
</script>
You could wrap those calls in a function to make it less ugly =)