I am using jQuery draggable. I have added draggable function to main div. Now in all the child elements it's also draggable. How can I disable dragging inside child div if parent is draggable?
$(function() {
$("#draggable").draggable();
});
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
border: black solid 2px;
}
.noDrag {
width: 100px;
height: 50px;
border: blue solid 2px;
}
<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>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
<div class='noDrag'>No Drag</div>
</div>
To fix this use the cancel property, and provide it a selector to match the element you want to disable the drag behaviour on, like this:
$(function() {
$("#draggable").draggable({
cancel: '.noDrag'
});
});
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
border: black solid 2px;
}
.noDrag {
width: 100px;
height: 50px;
border: blue solid 2px;
}
<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>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
<div class="noDrag">No Drag</div>
</div>
you can use cancel or disableselection() like suggest in jQuery-ui documentation https://jqueryui.com/draggable/#handle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Handles</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, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#draggable p { cursor: move; }
</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({ handle: "p" });
$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
$( "div, p" ).disableSelection();
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p class="ui-widget-header">I can be dragged only by this handle</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>You can drag me around…</p>
<p class="ui-widget-header">…but you can't drag me by this handle.</p>
</div>
</body>
</html>
Related
I am trying use Jquery-ui for the first time, and am trying to create a div with all the 3 features mentioned above in the title.
You can find the JSBin link here: https://jsbin.com/haleyucipu/1/edit?html,output
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Visual feedback</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-selecting { background: #FECA40; }
.ui-selected { background: #F39814; color: white; }
.ui-resizable-ghost { border: 1px dotted gray; }
</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() {
$( "#resizable" ).resizable({
ghost: true,
helper: "ui-resizable-helper",
animate: true
}).draggable().selectable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content"></div>
</body>
</html>
Only, resizeable and draggable work! Selectable doesnt!
Selectable needs a container, if you look at the examples, they use <ol>.
Consider the following code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Visual feedback</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
}
#resizable h3 {
text-align: center;
margin: 0;
}
.ui-selecting {
background: #FECA40;
opacity: .65;
}
.ui-selected {
background: #F39814;
color: white;
}
.ui-resizable-ghost {
border: 1px dotted gray;
}
</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() {
$("#resizable").resizable({
ghost: true,
helper: "ui-resizable-helper",
animate: true
}).draggable().parent().selectable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content"></div>
</body>
</html>
This makes <body> the container and now all UI Interactions work.
Hope that helps.
Sorry to ask but I have searched but coming up with nothing.
I have some divs ( I know everyone has a 'div' ) and I want to add feeds\content
See my code below, in these 'widgets' can I add things like twitter and my email and a news feed?
also not to be too picky, can I just get text only ?
How do I go about it ? Is their something
here is the html, jquery and css code...
<!doctype html>
<html lang="en">
<head>
<title>snap to grid</title>
<meta charset="utf-8">
<meta name="description" content="nothing yet">
<meta name="author" content="Pavle Stojanovic">
<link rel="stylesheet" href="snap.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( ".widgets" ).draggable({ grid: [ 10, 10 ] });
$( ".widgets" ).draggable({
containment: "#draggable-container",
drag: function(event){
if($('.widgets').position().left + $('.widgets').width() == $('.body-container').width()){
event.preventDefault(); //cancel the drag.
console.log('d');
}
}
});
});
</script>
</head>
<body>
<div class="body-container">
<div id="draggable-container">
<div id="widget-1" class="widgets"><p>Twitter</p></div>
<div id="widget-2" class="widgets"><p>Weather</p></div>
<div id="widget-3" class="widgets"><p>News</p></div>
<div id="widget-4" class="widgets"><p>Email</p></div>
</div>
</div>
</body>
</html>
html, body{
background-color: #2196F3;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#widget-1{
background-color: blue;
}
#widget-2{
background-color: purple;
}
#widget-3{
background-color: orange;
}
#widget-4{
background-color: green;
}
.widgets{
border-radius: 25px;
padding: 20px;
width: 150px;
height: 200px;
}
#draggable-container{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid black;
width:90%;
height:90%;
}
I'm trying to implement a drag-drop scenario.
A problem that I'm having is that I need to drop an element on an outer div but the event fires on the inner div.
Here is a codepen to demonstrate my problem:
http://codepen.io/anon/pen/KdvboR
<html>
<head>
<style>
.dropDiv {
height: 100px;
width: 200px;
border: 1px solid black;
}
.innerDiv {
height: 100px;
width: 100px;
border-right: 1px solid black;
}
.drag {
border: 1px solid green;
}
.drop {
border: 1px solid red;
}
</style>
</head>
<body>
<span id="text" draggable="true" ondragstart="drag(event)" ondragend="dragend(event)" class="">Drag Text</span>
<br>
<br>
To Here:
<div class="dropDiv" ondrop="drop(event)" ondragenter="dragenter(event)" ondragleave="dragleave(event)" ondragover="allowDrop(event)">
<div class="innerDiv"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
$(ev.target).addClass('drag');
ev.dataTransfer.setData('text', ev.target.id);
}
function dragenter(ev) {
$(ev.target).addClass('drop');
}
function dragleave(ev) {
$(ev.target).removeClass('drop');
}
function dragend(ev) {
$(ev.target).removeClass('drag');
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData('text');
ev.target.appendChild(document.getElementById(data));
$(ev.target).removeClass('drop');
}
</script>
</body>
</html>
I need that whenever the dragged element is in the outer div the border will be red. but when the mouse is over the inner div, only the inner div's border is red.
Any suggestions?
Thanks.
Go through this example
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>
You are only one div on your container. remove container and try
<div class="innerDiv" ondrop="drop(event)" ondragenter="dragenter(event)" ondragleave="dragleave(event)" ondragover="allowDrop(event)"></div>
<div class="innerDiv" ondrop="drop(event)" ondragenter="dragenter(event)" ondragleave="dragleave(event)" ondragover="allowDrop(event)"></div>
.innerDiv {
height: 100px;
width: 100px;
border: 1px solid;
float:left;
}
Thanks everybody,
eventually, I solved it by checking if the event coords are in the outer div.
I've using the first example by this code: http://jqueryui.com/draggable/#handle like this:
$(function() {
$("#draggable").draggable({
handle: "p"
});
});
#draggable {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 0 10px 10px 0;
}
#draggable p {
cursor: move;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
<p class="ui-widget-header">I can be dragged only by this handle</p>
</div>
I would to start touch outside "draggable handle" and activate it when mouse passing over it.
I try to explain better with an image:
Is it possibile? How can I do this?
i have a drag and drop code here from jquery i wanted to get the value of the image then insert it to the database and when the image is remove from the droppable area then update and remove the image value.. how can i do it?
here's the code....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="js/jquery-1.4.4.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.draggable.js"></script>
<script src="js/jquery.ui.droppable.js"></script>
<link rel="stylesheet" href="js/demos.css">
<style>
#comment { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#draggable1 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 500px; height: 200px; padding: 0.5em; float: left; margin: 10px; background: silver;}
</style>
<script>
$(function() {
$( "#comment" ).draggable();
$( "#draggable1" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.find( "p" )
.html("Dropped!")
},
out: function(event, ui) {
$(this)
.find( "p" )
.html("Drop Node Here!");
}
});
});
</script>
</head>
<body>
<div class="demo">
<div id="comment" class="ui-widget-content">
<img src="images/signup.png" id="1">
</div>
<div id="draggable1" class="ui-widget-content">
<img src="images/signup.png" id="2">
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop Node here</p>
<?php
$comment = "#comment";
$drop = "#droppable";
$dropped = "dropped";
require_once("includes/connection.php");
require_once("includes/close.php");
?>
</div>
</div><!-- End demo -->
</body>
</html>
Off the top of my head something like this should give you the src of the image
drop: function( event, ui ) {
var image_src = $(ui).attr('src');