I'm trying to use jQuery Ui for sorting some Items with Drag and Drop.
If one element passes the dropzone, the dropzone should expand. This works good. But my problem is that the attribute of event.target.clientWidth is still 25. So the dropzone is still 25px, while the container is allready 250px.
I dont know how to change it (i allready tried event.target.clientWidth = 250 but this doesnt work) and hoped you could maybe help me
This is a part of my code:
Html:
<section id="plot" class="plot">
<div class="cards">
<div id="card__container" class="card__container" style="width: 1392px;">
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card1">
<span class="card__id">1</span>
<span class="card__text">Hektor runs away followed by police</span>
</div>
</div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card2">
<span class="card__id">2</span>
<span class="card__text">Hektor stumbles and falls</span>
</div></div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card3">
<span class="card__id">3</span>
<span class="card__text">Hektor get catched by police and trys to bluff hisself out</span>
</div></div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card5">
<span class="card__id">5</span>
<span class="card__text">Hektor did say something stupid</span>
</div></div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card4">
<span class="card__id">4</span>
<span class="card__text">Police a bit confused and believes him</span>
</div></div>
<div class="card__dropzone">
<div class="card__dropzone--inner"></div>
</div>
<div><div class="card ui-widget-content" id="card6">
<span class="card__id">6</span>
<span class="card__text">Police arrested him</span>
</div>
</div>
</div>
</div>
</section>
Css:
.card {
cursor: pointer;
}
.plot {
overflow-y: hidden;
overflow-x: visible;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100vw;
padding-top: 25%;
}
.cards {
position: relative;
left: 0;
right: 0;
margin: auto;
}
.card__container {
left:0;
right: 0;
margin: 25px auto;
height: 100%;
display: table;
}
.card {
margin-top: 50px;
width: 200px;
height: 150px;
border: 1px solid #d3d3d3;
display: table-cell;
}
.card__dropzone--inner {
width: 25px;
height: 150px;
}
.card__id {
font-size: 1.5em;
font-weight: bold;
display: block;
padding: 10px;
}
.card__text {
display: block;
padding: 10px;
font-family: sans-serif;
}
.card__dropzone {
display: table-cell;
vertical-align: top;
}
.card__dropzone--active {
background: blue;
box-shadow: 0 0 10px blue;
}
Javascript:
$(document).ready(function() {
$(".card").draggable({ helper: "clone",
revert: true,
opacity: 0.5,
scroll:true,
scrollSensitivity: 100});
$(".card__dropzone--inner").droppable({
activeClass: "card__dropzone--active",
over: function(event) {
$(this).animate({
width: "250px"
}, 200);
event.target.clientWidth = 250;
console.log("over");
},
out: function(event) {
console.log("now?!");
$(event.target).animate({
width: "25px"
},200);
event.target.clientWidth = 25;
console.log("out");
},
drop: function(event) {
console.log("drop");
}
});
});
And this is my jsfiddle
http://jsfiddle.net/qthrvt8s/
You have to add refreshPositions: true while initializing .draggable() to tell your droppable area to take new dimensions in account :
$(document).ready(function() {
$(".card").draggable({ helper: "clone",
revert: true,
opacity: 0.5,
scroll:true,
refreshPositions: true,
scrollSensitivity: 100});
$(".card__dropzone--inner").droppable({
activeClass: "card__dropzone--active",
over: function(event) {
$(this).animate({
width: "250px"
}, 200);
console.log("over");
},
out: function(event) {
console.log("now?!");
$(event.target).animate({
width: "25px"
},200);
console.log("out");
},
drop: function(event) {
console.log("drop");
}
});
});
Please see the updated fiddle
Related
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
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>
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.
I just want the ability to be able to pause the animation on mouse hover. I trying to looking good way to do that, but there was some issues. I tested some hover/stop functions, but I can't get these working correctly.
jQuery(document).ready(function() {
setInterval(function() {
jQuery('#testimonials .slide').filter(':visible').fadeOut(1000, function() {
if (jQuery(this).next('.slide').size()) {
jQuery(this).next().fadeIn(1000);
} else {
jQuery('#testimonials .slide').eq(0).fadeIn(1000);
}
});
}, 5000);
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
You can achieve this by calling clearInterval() when the slide is hovered, then re-creating the interval again when the mouse leaves the slide, something like this:
jQuery(document).ready(function($) {
var $slides = $('#testimonials .slide');
function beginSlideInterval() {
return setInterval(function() {
$slides.filter(':visible').fadeOut(1000, function() {
var $next = $(this).next().length ? $(this).next() : $slides.first();
$next.fadeIn(1000);
});
}, 3000);
}
var slideInterval = beginSlideInterval();
$slides.on('mouseenter', function() {
clearInterval(slideInterval);
}).on('mouseleave', function() {
slideInterval = beginSlideInterval();
});
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
Note that I shortened the interval to make the effect more obvious.
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