jqueryUI, accept if 'drop to' container meets requirements - javascript

the JqueryUi documentation mentions that there is a way to check if element that user 'drag and drop' meets the requiremments by using:
accept: function(el) {
return CHECK_REQUIREMENTS;
}
but how is it possible to check if the target element (the container the user is trying to place the item into) that meets some criteria?
My code is:
<html>
<head>
<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>
<style>
* * {
box-sizing: border-box;
}
.search-container {
display: flex;
flex-wrap: wrap;
width: 33%;
min-height: 200px;
border: 1px solid red;
}
.search-item {
border: 1px solid grey;
text-align: center;
margin: 5px;
width: 150px;
max-width: 300px;
flex-basis: 150px;
flex-grow: 1;
height: 80px;
}
</style>
</head>
<body>
<div id="myContainer">
<div id="firstContainer" class="search-container acceptableContainer" style="float:left">
<div class="search-item acceptable">first</div>
<div class="search-item acceptable">two</div>
<div class="search-item acceptable">three</div>
<div class="search-item acceptable">four</div>
<div class="search-item acceptable">five</div>
<div class="search-item">six</div>
<div class="search-item">seven</div>
<div class="search-item">eight</div>
<div class="search-item">nine</div>
</div>
<div id="secondContainer" class="search-container" style="float:left">
</div>
<div id="thirdContainer" class="search-container acceptableContainer">
</div>
</div>
</body>
<script>
$(".search-item").draggable({
revert: 'invalid'
});
$(".search-container").droppable({
accept: function(el) {
return el.hasClass('acceptable');
},
drop: function( event, ui ) {
var droppable = $(this);
var draggable = ui.draggable;
draggable.appendTo(droppable);
draggable.css({top: '0px', left: '0px'});
}
});
</script>
</html>
So this code checks if 'drag and drop' has class acceptable.
For example, I would like to check if target container has class acceptableContainer and accept the operation only if it returns true (so secondContainer can not be target container).
How is it posisble to deal with that?

Inside .drop event, you check the condition and if met, then proceed with the operation like appending to new location etc. Also modify css properties to match positioning in new location, and if conditions are not met, set the 'revert' option of draggable to 'true',
Below part might not be necessary I got mixed results
[then reset it to 'invalid' inside .stop event of draggable. Key is .stop of draggable is called after .drop of droppable.]
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Droppable </title>
<link rel="stylesheet" href="jquerylib/jquery-ui.css" />
<script src="jquerylib/jquery.js"></script>
<script src="jquerylib/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="css/styles.css" />-->
<style>
.boxMain {
width: 40%;
height: 400px;
background-color: yellow;
border: 3px solid black;
color: black;
margin: 0px auto;
/*padding: 15% 15% 0% 15%;*/
float: left;
}
.box {
width: 100px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
border-radius: 15px;
color: white;
margin: 5px;
z-index: 99;
float: left;
/*position: absolute;*/
}
</style>
<!--<script src="script/02droppable.js"></script>-->
<script>
$(document).ready(function () {
$(".box").draggable({
revert: "invalid",
stop: function () {
console.log("stopped");
$(this).draggable("option", "revert", "invalid");
}
});
$(".boxMain").droppable({
accept: ".box",
drop: function (e, u) {
console.log("dropped");
if ($(this).hasClass("AcceptingBox")) {
u.draggable.appendTo($(this));
u.draggable.css({
"left": 0,
"top": 0
});
} else {
console.log("No");
u.draggable.draggable("option", "revert", true);
}
}
});
});
</script>
</head>
<body>
<div style="height:200px;">
<div id="sub1" class="box" style="background: red"></div>
<div id="sub2" class="box" style="background: green"></div>
<div id="sub3" class="box" style="background: blue"><p>Click</p></div>
<div id="sub4" class="box" style="background: aqua"><p>Click</p></div>
</div>
<div id="main1" class="boxMain AcceptingBox">Accepting</div>
<div id="main2" class="boxMain"></div>
<!--<div id="main2" class="boxMain"></div>-->
</body>
</html>

Consider the following.
$(function() {
$(".search-item").draggable({
revert: 'valid'
});
$(".search-container").droppable({
accept: '.acceptable',
drop: function(event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
if (droppable.hasClass("acceptableContainer")) {
draggable.appendTo(droppable);
draggable.css({
top: '0px',
left: '0px'
});
} else {
return false;
}
}
});
});
* * {
box-sizing: border-box;
}
.search-container {
display: flex;
flex-wrap: wrap;
width: 33%;
min-height: 200px;
border: 1px solid red;
}
.search-item {
border: 1px solid grey;
text-align: center;
margin: 5px;
width: 150px;
max-width: 300px;
flex-basis: 150px;
flex-grow: 1;
height: 80px;
}
<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="myContainer">
<div id="firstContainer" class="search-container acceptableContainer" style="float:left">
<div class="search-item acceptable">first</div>
<div class="search-item acceptable">two</div>
<div class="search-item acceptable">three</div>
<div class="search-item acceptable">four</div>
<div class="search-item acceptable">five</div>
<div class="search-item">six</div>
<div class="search-item">seven</div>
<div class="search-item">eight</div>
<div class="search-item">nine</div>
</div>
<div id="secondContainer" class="search-container" style="float:left">
</div>
<div id="thirdContainer" class="search-container acceptableContainer">
</div>
</div>
You will need to return a false to invoke the revert upon drop. It's sort of backward logic.

Related

Mouseover on document for find a classes

I have a code like this, with 2 different divs:
function mouseoverCheck(text) {
$(document).on('mousemove', function(e) {
$('#tooltip').show().html(text)
$('#tooltip').css({
left: e.pageX,
top: e.pageY
}).show();
});
}
function hover() {
$(document).on('mouseover', function(event) {
var $target = $(event.target);
if ($target.closest(".container1").length) {
mouseoverCheck('Container1 found!')
event.stopPropagation();
} else {
mouseoverCheck('None')
event.stopPropagation();
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tooltip" style="position:absolute; display: none; background: yellow;"></div>
<div class="container1">
<div class='container2' style="height:200px; width: 100%; border: 3px solid red">
<div class="container3" style="height:100px; width: 100%">
<h1 style="font-size: 40px; text-align:center">CONTAINER HOVER</h1>
</div>
</div>
</div>
<div class="container4">
<div class='container5' style="height:200px; width: 100%; border: 3px solid red">
<h1 style="font-size: 40px; text-align:center">NONE</h1>
</div>
</div>
I need to show mi tooltip with text if i pass the mouse over my div , but when i pass over my .container1, it doesn't works good, because it show me 'Container1 found!', alternate by 'None'.
Have you got any other solution?
Thank you!
Try this code .. Is this what you want??
$('.tooltip_show').on('mousemove' , function(e) {
$('#tooltip').html($(this).find('h1').text());
$('#tooltip').css({
left: e.pageX,
top: e.pageY
}).show();
});
$('div :not(.tooltip_show)').on('mouseover' , function(e) {
$('#tooltip').hide().html('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tooltip" style="position:absolute; display: none; background: yellow;"></div>
<div class="tooltip_show container1">
<div class='container2' style="height:200px; width: 100%; border: 3px solid red">
<div class="container3" style="height:100px; width: 100%">
<h1 style="font-size: 40px; text-align:center">CONTAINER HOVER</h1>
</div>
</div>
</div>
<div class="container4">
<div class='container5' style="height:200px; width: 100%; border: 3px solid red">
<h1 style="font-size: 40px; text-align:center">NONE</h1>
</div>
</div>
Add tooltip_show class to the container you want to show tooltip

Getting old size values from jquery.ui.resizable

I am trying to get the new size of a div after resizing. However when using ui.size.height or $(e.target).height() I am getting instead the original height of the element.
function allowResizing(el){
$(el).resizable({
animate: true,
containment: "parent",
helper: "ui-resizable-helper",
minWidth: 250,
minHeight: 250,
grid: [20, 20],
stop: function( e, ui ) {
console.log("height: " + $(e.target).height())
console.log("height: " + ui.size.height)
console.log("originalHeight: " + ui.originalSize.height)
}
});
}
All three logs write the same value. When I try this code on any other div on another page I get the right values.
My hmtl:
<style>
.containment-wrapper > .row{
border: 3px solid white;
width: 100%;
height: calc(100vh - 200px);
min-height: 200px;
position:relative;
}
.ui-resizable-helper {
border: 2px dotted #b1b1b1;
}
</style>
<div class="containment-wrapper">
<div class="row">
<div id="resizable" class="ui-draggable ui-draggable-handle" style="position: absolute !important; outline: 1px solid white;">
<div class="Container_Header">
<span style="display: block; padding: 0 10px" class="Text_H2">$title</span>
</div>
<p style="padding: 10px">
Some text
</p>
</div>
<script type="text/javascript">
allowResizing("#resizable")
</script>
</div>
</div>
I also use ui.Draggable on the same element but also tried without it.
Appreciate every help. Thank you
Since you have defined a Helper, you will want to review the Size of that element.
$(function() {
function allowResizing(el) {
$(el).resizable({
animate: true,
containment: "parent",
helper: "ui-resizable-helper",
/*
minWidth: 250,
minHeight: 250,
grid: [20, 20],
*/
resize: function(e, ui) {
log("Height: " + ui.size.height);
},
stop: function(e, ui) {
log("El height: " + $(ui.element).height());
log("Stop height: " + ui.size.height);
log("Original Height: " + ui.originalSize.height);
log("Helper Height: " + ui.helper.height());
}
});
}
function log(str) {
var log = $("#log").length ? $("#log") : $("<div>", {
id: "log"
}).appendTo("body");
log.append(`<p>${str}</p>`).scrollTop(log.prop("scrollHeight"));
}
allowResizing("#resizable");
});
.containment-wrapper>.row {
border: 3px solid white;
width: 100%;
height: calc(100vh - 200px);
min-height: 200px;
position: relative;
}
.ui-resizable-helper {
border: 2px dotted #b1b1b1;
}
#log {
font-size: 65%;
height: 4em;
overflow: auto;
}
#log p {
padding: 0;
margin: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<div class="containment-wrapper">
<div class="row">
<div id="resizable" style="position: absolute !important; outline: 1px solid white;">
<div class="Container_Header">
<span style="display: block; padding: 0 10px" class="Text_H2">$title</span>
</div>
<p style="padding: 10px">
Some text
</p>
</div>
</div>
</div>

Contain a large draggable child div inside smaller parent div

I would like to prevent a larger div from being dragged out of smaller div, like facebook does with it's profile images.
Does anyone have an idea of how I would go about to do this?
All the best, Laurens
In the following link I give an example of what i mean.
draggable_outside
PS: I'm sorry, I didn't get the JS section to work in the code snippet, it's my first post. I wrote it as a script in the HTML section.
.wrapper {
width: 400px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.parent {
background: gray;
display: block;
width: 100px;
height: 100px;
}
.child {
position: absolute;
width: 200px;
height: 200px;
display: block;
background: blue;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.child').draggable();
});
</script>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
</div>
</div
You can use jQuery draggable function as follows.
Here in drag event we reset x and y if they cross the boundaries.
See the fiddle here
.wrapper {
width: 400px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.parent {
background: gray;
display: block;
width: 100px;
height: 100px;
}
.child {
position: absolute;
width: 200px;
height: 200px;
display: block;
background: blue;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.child').draggable(
{
drag: function(event, ui) {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
// console.log(xPos);
// console.log(yPos);
if(ui.position.left>250)
{
ui.position.left=250;
}
if(ui.position.left<-40)
{
ui.position.left=-40;
}
if(ui.position.top<-90)
{
ui.position.top=-90;
}
if(ui.position.top>200)
{
ui.position.top=200;
}
}
});
});
</script>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
</div>
</div

Drag image inside a div cell

I'm writing an email template builder. How can I drag image inside one of div cells ?
Actually I want to drag yellow and red divs to main container and then drag image inside one of div cells.
The HTML is:
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="container" style="width:900px;height:400px; border:solid 1px red;">
drag here
</div>
<h2>From this list</h2>
<div id="toolBox" class="linked">
<div class="customeDraggable">
<div style="border: solid 1px yellow; float: right; height: 150px; width: 50%"> 1 </div>
<div style="border: solid 1px yellow; float: left; height: 150px; width: 49%"> 2 </div>
</div>
<div class="customeDraggable">
<div style="border: solid 1px red; float: right; height: 150px; width: 33%"> 1 </div>
<div style="border: solid 1px red; float: left; height: 150px; width: 33%"> 2 </div>
<div style="border: solid 1px red; float: left; height: 150px; width: 33%"> 3 </div>
</div>
<div class="customeDraggable">
<img src="http://icons.iconarchive.com/icons/artua/mac/128/Setting-icon.png" />
</div>
</div>
and the JavaScript code is:
$(function () {
toolBox = $('#toolBox'),
container = $('.container'),
container.sortable({
revert: false,
beforeStop: function (event, ui) {
$(this).data("lastItem", ui.item);
debugger;
},
receive: function (event, ui) {
$(this).data("lastItem").find('img').css('opacity', '1');
debugger;
//ui.item.draggable('destroy').css('opacity', '0.2');
}
});
toolBox.find('.customeDraggable').draggable({
connectToSortable: container,
helper: "clone",
revert: "invalid",
stop: handleDragStop
});
function handleDragStop(event, ui) {
debugger;
var offsetXPos = parseInt(ui.offset.left);
var offsetYPos = parseInt(ui.offset.top);
//alert("Drag stopped!\n\nOffset: (" + offsetXPos + ", " + offsetYPos + ")\n");
}
});
Here is the example on jsfiddle
Once you have moved the yellow div to the red, you must change the class of the div, in order to be able to receive stuff by dragging, instead of just being an element.
On the other hand, if the image cannot be dragged into the red div, it just must to be able to be dragged into the yellow one with a new class just for that.
finally I found a sample , now just customize it . jsfiddle sample
the html :
<ul class="widgets col-sm-2">
<li class="col-xs-6" data-type="grid-row" style="background-image: url(https://s3.amazonaws.com/jetstrap-site/images/builder/components/grid_row.png); background-repeat: no-repeat;" data-html='<div class="row"><div class="col-md-4 target"><h3>Span 4</h3><p>Content</p></div><div class="col-md-4 target"><h3>Span 4</h3><p>Content</p></div><div class="col-md-4 target"><h3>Span 4</h3><p>Content</p></div></div>'>Grid Row
</li>
<li class="col-xs-6" data-type="button" style="background-image: url(https://s3.amazonaws.com/jetstrap-site/images/builder/components/button.png); background-repeat: no-repeat;" data-html='Default'>Button
</li>
<li class="col-xs-6" data-type="heading" style="background-image: url(https://s3.amazonaws.com/jetstrap-site/images/builder/components/heading.png); background-repeat: no-repeat;" data-html='<h1>Heading 1</h1>'>Heading
</li>
<li class="col-xs-6" data-type="jumbotron" style="background-image: url(https://s3.amazonaws.com/jetstrap-site/images/builder/components/hero_unit.png); background-repeat: no-repeat;" data-html='<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>'>Jumbotron
</li>
the css :
.widgets {
height: 800px;
background: #454443;
}
.widgets li {
float: left;
color: #fff;
list-style: none;
font-size: 13px;
font-weight: bold;
opacity: 0.85;
width: 125px;
padding-top: 75px;
text-align: center;
font-family:'ProximaNova-Regular', 'Helvetica Neue', Helvetica, Arial, sans- serif;
}
.widgets li:hover {
background-color: #454443;
opacity: 1.0;
cursor: -webkit-grab;
}
.widgets li a:hover {
cursor: -webkit-grab;
}
.widgets li a {
color: #fff;
text-decoration: none;
text-shadow: none;
}
.widget {
width: 150px;
height: 150px;
margin: 15px;
}
.page {
height: 800px;
border: thin solid red;
}
.page .row {
min-height: 50px;
}
.page .row div {
border-radius: 5px;
padding: 10px;
min-height: 30px;
border: 1px dotted #ccc;
}
and the js :
// Make all widgets draggable
$(".widgets li").draggable({
revert: "valid",
helper: "clone",
cursor: "move"
});
setDrop = function(targets) {
$(targets).droppable({
accept: ".widgets li",
greedy: true,
drop: function (event, ui) {
console.log(this);
var el = $($(ui.helper[0]).data("html"));
$(this).append(el);
setDrop($(".target", el));
}
});
};
setDrop($('.target'));
BTW, jquery-UI.js , bootstrap.css and bootstrap.js are needed

How to center all list's elements to parent div

I am going to add dynamically elements to my block of ul.
I would like to center all list's elements to parent div(brown boder).
For example,
if the resolution of the browser allows you to set two blocks in one row, I would like to center this row in relation to parent div.
I would be very graftefully.
Link to demo
myCode:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var tab = [2,3,4,5,7,8,9,11,12,13,14,15];
$(document).ready(function(){
$('#godziny').on('click', '.godzina', function(){
//alert(this.attr('class'));
$('.yb').removeClass('yb');
$(this).addClass('yb');
});
$('#getElements').click(function() {
for(i = 0; i < tab.length; ++i) {
alert(tab[i]);
setTimeout(function(i){
$('#godziny').append('<li class="godzina">' + tab[i] + '</li>');
}, i*50);
}
});
});
</script>
<style>
#spisSalonow {
margin: 0 auto;
}
#spisSalonow > div {
padding-top: 15px;
color:red;
}
#wybor_terminu {
border: 1px solid brown;
}
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
border: 1px solid red;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
float: left;
cursor: pointer;
margin-right: 40px;
margin-top: 40px;
/*margin:auto;*/
/*
opacity: 0.4;
filter: alpha(opacity=40);
*/
}
.yb {
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="get Elements" id="getElements"/>
<section id="content">
<div class="full">
<BR/>
<div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
<div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" /> <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
<ul id="godziny" style="margin-top: 25px;">
</ul>
</div>
</section>
</div>
</body>
</html>
You can use the CSS flexbox to achieve this. Here is a link to a complete guide on how to use flexbox. I hope this helps.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this lines:
CSS
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
/*NEW*/
padding: 0;
width: 100%;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
/*float: left; You don't need this line*/
cursor: pointer;
/*NEW*/
margin:auto;
margin-top: 40px;
}
EDIT
This is only a quick solution with bootstrap maybe it could help you a little bit. jsfiddle
jQuery
In this line I added bootstrap classes:
$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');
This code center your boxes (is not the best solution, but it works):
countBoxes = $('#godziny').width() / 200;
alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2;
if(countBoxes >= 2.65){
$('#godziny').css('margin-left', alignBoxes);
} else{
$('#godziny').css('margin-left', 0);
}
If you change the resolution of your screen, click the button to center your boxes again.

Categories