From jquery ui draggable internally it fires blur event so I am unable to set border to the container. Is there anything I am missing? How can I set border on select of the draggable element. I am trying to add border on select(on mouse down).
$("#draggable").draggable();
$("#draggable").on('focus', function() {
$(this).css('border', '1px solid')
}).blur(function() {
$(this).css('border', '')
});
<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" tabIndex = -1>
<p>Drag me around</p>
</div>
You can either use the class added when dragging .ui-draggable-dragging or add your own class using the start and stop events.
$("#draggable").draggable({
start: function(event, ui) {
ui.helper.addClass('active');
},
stop: function(event, ui) {
ui.helper.removeClass('active');
}
});
#draggable {
width: 100px;
height: 100px;
background: #ccc;
}
.ui-draggable-dragging {
border: 3px solid red;
}
.active {
outline: 3px dashed yellow;
}
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="draggable">Drag me</div>
Use dragstart and dragstop events. Here is the reference for documentation https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event
$("#draggable").on('dragstart', function() {
$(this).css('border', '1px solid')
}).on("dragstop",function() {
$(this).css('border', '0')
});
Use mousedown to add border before dragging starts
$("#draggable").on('mousedown', function() {
$(this).css('border', '1px solid')
}).on("dragstop",function() {
$(this).css('border', '0')
});
You could simply add a new css class that specifies what it should look like when active:
#draggable:active {
border: 1px solid;
}
Related
In my web app, there is a draggable element.
I need to set the left position of this element when the element reaches a certain limit while dragging.
Using jQuery draggable widget, I have access to the position of the element:
function drag(e, ui) {
console.log(ui.position.left);
}
Let say my left attribute is setted to 1100px, I need to set it to 500px and this, without stopping the dragging.
I have three functions: dragStart, drag, and gradEnd.
Currently, I managed to get only one result: when setting ui.position.left = 500; on the drag function (using a condition), the left position is set to 500 but of course, the element is then stuck at 500px. The reason is that every time the drag function is triggered, the left position is setted to 500.
If the code runs only once the line ui.position.left = 500; the position left attribute is set to 500, but directly reset to 1100.
How can I set the left attribute once and for all?
$("#divId").draggable({
drag: drag,
})
function drag(e, ui) {
if (ui.position.top > 50) {
ui.position.left = 100;
}
}
#divId {
height: 70px;
background-color: white;
border: 4px solid #000000;
text-align: center;
color: black;
cursor: grab;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="divId">
Bubble
</div>
I am not sure how jQuery Draggable handles things under the hood, but even after setting ui.position.left = 100, it does not register in the event until after dragging has stopped - that is why I opted to check the actual CSS property of the element that is being targeted.
I have also provided an example (closure/functional based) which demonstrates how to handle this without having to check CSS..
First example:
$("#divId").draggable({
drag: drag
});
function drag(e, ui) {
if (ui.position.top > 50) {
$("#container").css('padding-left', '100px');
$(this).css('left', '0px');
}
if (ui.position.left < 0) {
ui.position.left = 0
}
}
#divId {
height: 70px;
background-color: white;
border: 4px solid #000000;
text-align: center;
color: black;
width: 300px;
cursor: grab;
}
#container {
height: 100vh;
width: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="container">
<div id="divId">
Bubble
</div>
</div>
Second example, more of a 'closure based functional approach': does not require you to check CSS..
$("#divId").draggable({
drag: drag()
});
function drag(e, ui) {
let TRIGGER = false, TOP_THRESHOLD = 50, LEFT_POSITION = 100;
return function(e, ui) {
if (TRIGGER) {
ui.position.left = LEFT_POSITION;
} else if (ui.position.top > TOP_THRESHOLD) {
TRIGGER = true;
ui.position.left = LEFT_POSITION;
}
}
}
#divId {
height: 70px;
background-color: white;
border: 4px solid #000000;
text-align: center;
color: black;
cursor: grab;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="divId">
Bubble
</div>
I have example where I drag-drop elements to drop area. Basically all elements inside this area are cloned. I also want to implement selectable in this area, but there is a problem - how to select elements which are not part of the list?
I want to implement selectable on non-list elements. I've set
$(".ui-layout-center").selectable();
in droppable div and when I try to select area with mouse, I see lasso, like in this image:
How to select those elements? They are not part of the list, they are dropped clones.
I have example here
Code:
function setDraggable(el) {
el.draggable({
helper: 'original',
revert: false,
cursor: 'move'
});
}
function setResizable(el){
el.resizable({
});
}
$(function() {
$(".ui-layout-center").selectable();
$(".component").draggable({
helper: function() {
$clone = $(this).clone();
$clone.appendTo('body').css({'zIndex': 5});
return $clone;
},
cursor: 'copy',
containment: "document"
});
$('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
var clone= $(ui.draggable).clone().addClass("dropped").draggable();
if(clone){
clone.css('left',ui.position.left);
clone.css('top',ui.position.top);
$(this).append(clone);
setDraggable(clone);
setResizable(clone);
}
}
});
});
CSS:
.ui-layout-center {
width: 800px;
height: 800px;
border: 1px solid black;
}
.ui-state-hover {
background-color: #f9ffff;
}
.ui-layout-center .component {
position:absolute !important;
}
.component{
width: 50px;
height: 50px;
background-color: yellow;
border: 1px solid black;
margin: 3px;
}
HTML:
I know that jQuery draggable can accept a function for revert action.
$(".clipboard-li").draggable({
revert: function (event) {
console.log(event) // boolean value
}
});
But the parameter being passed to this function is a boolean.
How can I get the the element currently being dragged in this function?
revert is an option where you can set
Whether the element should revert to its start position when dragging stops
If you want to get the element after you drag it somewhere use stop event
$(".clipboard-li").draggable({
revert: function(event) {
return $(this).hasClass("revert"); //You can set it either to true or false
},
stop: function( event, ui ) {
console.log($(event.target).attr("class"));
}
});
.clipboard-li {
cursor: move;
width: 150px;
height: 150px;
border: 1px solid #000;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<div class="container">
<div class="clipboard-li">
</div>
<div class="clipboard-li revert">
</div>
<div class="clipboard-li">
</div>
</div>
The revert handler function runs under the scope of the element being dragged; it's not passed in as an argument. As such you can use the this keyword to reference the element:
$('.drag').draggable({
revert: function() {
return this.prop('id') != 'allow';
}
})
.drag {
width: 75px;
height: 75px;
background-color: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div class="drag" id="allow">Allowed</div>
<div class="drag" id="deny">Denied</div>
I want to apply 4 effects on an element:
On hovering over the element.
On hovering away from the element.
On focusing on the element.
On blur.
But there is a conflict happens , When I focus on the element the hover in and out runs , and when I click outside the element the effect that should happens on blur doesn't happen , I think it's because of the hover out.
var el = $('input');
el.focus(function() {
el.css('border', '1px solid green');
});
el.hover(function() {
el.css('border', '1px solid green');
}, function() {
el.css('border', '1px solid grey');
});
el.blur(function() {
if (el.val == '') {
el.css('border', '1px solid red');
} else {
el.css('border', '1px solid grey');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type='text' />
On hovering in the border color turns green , on hovering out it turns grey.
But on focusing on the input the color is grey not green, and in blur it's grey too not red.
The issue is due to the logic in your if condition. el.val returns the reference of the function, which will never equate to an empty string. You need to use el.val() instead to get the actual value of the control:
var el = $('input');
el.focus(function() {
el.css('border', '1px solid green');
});
el.hover(function() {
el.css('border', '1px solid green');
}, function() {
el.css('border', '1px solid grey');
});
el.blur(function() {
if (el.val() == '') {
el.css('border', '1px solid red');
} else {
el.css('border', '1px solid grey');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type='text' />
That being said I would suggest combining CSS rules with this where possible, and definitely using classes over joining the styling rules with the JS code so tightly. Something like this:
var el = $('input');
el.blur(function() {
$(this).toggleClass('empty', $(this).val().trim() === '');
});
input {
outline: 0;
border: 2px solid grey;
}
input:hover,
input:focus {
border: 2px solid green;
}
input.empty {
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type='text' />
Three elements need to be activated when hovered. These elements are also used in different divs and share the same elements and classes. I am using JavaScript to achieve this.
The problem is when hovering over div 1, it also activates div 2 and 3. Probably because they share the same elements.
How can I activate them individually when hovering?
$(function() {
$(".link")
.hover(
function() {
$(".link").css('color', 'red', 'text-decoration', 'none');
$(".box").css('border-bottom', '4px solid #183c94');
$("span").css('opacity', '1');
},
function() {
$("link").css('color', '#000000');
$(".box").css('border-bottom', '4px solid #cfcfcf');
$("span").css('opacity', '0');
});
});
.box {
width: 300px;
height: 30px;
background: #f1f1f1;
text-align: center;
}
span {
height: 10px widtth: 10px;
background: #c3c3c3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
<div class="box">
<h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
<div class="box">
<h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
View on JSFiddle.
You need to use this to "find" the elements:
$(function () {
$(".link")
.hover(
function () {
$(this).css('color', 'red', 'text-decoration', 'none');
$(this).closest(".box").css('border-bottom', '4px solid #183c94');
$(this).next("span").css('opacity', '1');
},
function () {
$(this).css('color', '#000000');
$(this).closest(".box").css('border-bottom', '4px solid #cfcfcf');
$(this).next("span").css('opacity', '0');
});
});
DEMO
Also in CSS:
span {
height: 10px widtth: 10px;
background: #c3c3c3;
}
Should be:
span {
height:10px; width:10px;
background: #c3c3c3;
}
Use the jQuery $(this) key word
$(function () {
$(".link").hover(function () {
$(this).css('color', 'red', 'text-decoration', 'none');
$(".box").css('border-bottom', '4px solid #183c94');
$("span").css('opacity', '1');
},
function () {
$(this).css('color', '#000000');
$(".box").css('border-bottom', '4px solid #cfcfcf');
$("span").css('opacity', '0');
});
});
I updated your fiddle I didnt know how you handle box or span elements on hover.