jQuery UI drag and drop snap to center - javascript

I need a little help please.
I need to have a blue circle, a red circle, a blue square and a red square. I need to drag the red circle to the center of the red square and the blue circle to the center of the blue square. Unless I drag it to the correct position, it should revert to original position.
This is what I have so far:
$("#draggable, #draggable2").draggable({
revert: 'invalid', snap: "#droppable2"
});
$("#droppable").droppable({
accept: '#draggable'
});
$("#droppable2").droppable({
accept: '#draggable2',
});
http://jsfiddle.net/tM7cp/269/
I can't position them the circles to the center of the squares, how can I do that?

You can manually snap the items to the center of droppables using jQuery Ui's position() utility method as follows (I changed your logic slightly to avoid repetition of code and CSS):
$(".draggable").draggable({
revert: 'invalid'
});
$(".droppable").droppable({
accept: function(item) {
return $(this).data("color") == item.data("color");
},
drop: function(event, ui) {
var $this = $(this);
ui.draggable.position({
my: "center",
at: "center",
of: $this,
using: function(pos) {
$(this).animate(pos, 200, "linear");
}
});
}
});
.draggable {
float: left;
width: 100px;
height: 100px;
padding: 0.5em;
margin: 10px 10px 10px 0;
border: 1px solid black;
border-radius: 50%;
}
#draggable {
background-color: red;
}
#draggable2 {
background-color: blue;
}
.droppable {
padding: 0.5em;
float: left;
margin: 10px;
}
#droppable {
width: 100px;
height: 100px;
background-color: red;
}
#droppable2 {
width: 120px;
height: 120px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="draggable" class="draggable" data-color="red"></div>
<div id="draggable2" class="draggable" data-color="blue"></div>
<div id="droppable" class="droppable" data-color="red"></div>
<div id="droppable2" class="droppable" data-color="blue"></div>

Here is an updated example of TJ's response. I created a jQuery plugin that can be called to center the draggable item within the droppable region.
(function($) {
$.fn.centerOnDrop = function(ui) {
ui.draggable.position({
my: 'center',
at: 'center',
of: this,
using: function(pos) {
$(this).animate(pos, 200, 'linear');
}
});
};
})(jQuery);
$('.draggable').draggable({ revert: 'invalid' });
$('.droppable').droppable({
accept: function($item) {
return $(this).data('color') === $item.data('color');
},
drop: function(event, ui) {
$(this).centerOnDrop(ui);
}
});
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
}
.draggable { width: 4em; height: 4em; border-radius: 50%; }
#draggable-1 { background-color: pink; border: 1px solid red; }
#draggable-2 { background-color: lightblue; border: 1px solid blue; }
.droppable { width: 5em; height: 5em; }
#droppable-1 { background-color: red; }
#droppable-2 { background-color: blue; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="draggable-1" class="draggable" data-color="red"></div>
<div id="draggable-2" class="draggable" data-color="blue"></div>
<div id="droppable-1" class="droppable" data-color="red"></div>
<div id="droppable-2" class="droppable" data-color="blue"></div>

Related

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>

Closable div - Left div slides close, while right div width expands

I'm trying to make a div on the left side that can close by sliding to the left While the content in the right div expands to 100% filling the space of the closed div. image example
I found a demo here but its only for the closable div.
<div id="intro-wrap">
<div class="open-intro">+</div>
<div class="close-intro">-</div>
<div id="contentWrap">
<h1 class="main-header">Here is a Title</h1>
<p class="main-desc">You can write whatever you want about yourself here. You can say you're a superhuman alien ant, arrived from the nether regions of Dwarf-Ant-Dom.</p>
</div>
</div>
It has some work to do, but it'll get you started.
$(function() {
"use strict";
var isOpen = true;
$('#open-close').on('click', function() {
if (isOpen) {
animate(false);
isOpen = false;
} else {
animate(true);
isOpen = true;
}
});
});
function animate(action) {
if (action) {
$('#left').animate({ width: "30vw" }, 600);
$('#right').animate({width: "70vw",marginLeft: "-5px"}, 600);
} else {
$('#left').animate({width: "0px"}, 600);
$('#right').animate({width: "99vw" }, 600);
}
}
* {
padding: 0;
margin: 0;
}
#wrapper{
width: 100vw;
height: 100px;
border: 2px solid purple;
}
#wrapper > *{
display: inline-block;
}
#left {
position: relative;
width: 30vw;
height: 100px;
background: green;
}
#right {
position: relative;
width: 65vw;
height: 100px;
background: navy;
}
#open-close {
position: absolute;
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 5px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="left"></div>
<div id="right">
<div id="open-close"></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

I just want to create simple menu links inside some divs?

I just want to create simple menu links inside some animated divs , the problems is the div disapper if the mous move over the (li) inside it but if the div empty it works fine ?
first thing just come to my mind is i have to prevent event propagation , so i added this to the elements inside the sum menu ( the (li)) but is still face the same problem.
function hidemneu() {
$('#submenu1').hide('fold', 'slow');
$('#submenu2').hide('fold', 'slow');
$('#submenu3').hide('fold', 'slow');
$('#submenu4').hide('fold', 'slow');
}
$('#submenu1, #submenu2, #submenu3, #submenu4 ').on('mouseout', hidemneu);
$('#btn1').on('mouseover', function() {
hidemneu();
$('#submenu1').offset({
left: $('#btn1').offset().left
});
$('#submenu1').show("fold");
});
$('#btn2').on('mouseover', function() {
hidemneu();
$('#submenu2').offset({
left: $('#btn2').offset().left
});
$('#submenu2').show("fold");
});
$('#btn3').on('mouseover', function() {
hidemneu();
$('#submenu3').offset({
left: $('#btn3').offset().left
});
$('#submenu3').show("fold");
});
$('#btn4').on('mouseover', function() {
hidemneu();
$('#submenu4').offset({
left: $('#btn4').offset().left
});
$('#submenu4').show("fold");
});
$("a").on('mouseover', function(event) {
event.stopPropagation();
});
$("li").on('mouseover', function(event) {
event.stopPropagation();
});
$("ul").on('mouseover', function(event) {
event.stopPropagation();
});
#btn1,
#btn2,
#btn3,
#btn4 {
display: inline-block;
background-color: #ff8d73;
width: 100px;
outline: 1px dashed #000000;
padding-right: 30px;
}
#menu-wrapper {
width: 100%;
background-color: #b7dcff;
text-align: center;
}
#submenu1,
#submenu2,
#submenu3,
#submenu4 {
width: 300px;
height: 200px;
outline: 1px dashed #000000;
float: left;
left: 0;
position: absolute;
display: none;
}
#submenu1 {
background-color: #f00700
}
#submenu2 {
background-color: #a6baf0
}
#submenu3 {
background-color: #7af044
}
#submenu4 {
background-color: #f0dc35
}
#sub_wrapper:after {
clear: both;
}
li,
a {
outline: 1px dashed #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="menu-wrapper">
<div id='btn1'>button 1</div>
<div id='btn2'>button 2</div>
<div id='btn3'>button 3</div>
<div id='btn4'>button 4</div>
</div>
<div id="sub_wrapper">
<div id="submenu1">
<ul>
<li>option 1</li>
<li>oprion 2</li>
</ul>
</div>
<div id="submenu2">
clcik me 1
</div>
<div id="submenu3"></div>
<div id="submenu4"></div>
</div>
Changing line 8 of the javascript seems to do the trick:
from:
$('#submenu1, #submenu2, #submenu3, #submenu4 ').on('mouseout', hidemneu);
to
$('#submenu1, #submenu2, #submenu3, #submenu4 ').mouseleave(hidemneu);
function hidemneu() {
$('#submenu1').hide('fold', 'slow');
$('#submenu2').hide('fold', 'slow');
$('#submenu3').hide('fold', 'slow');
$('#submenu4').hide('fold', 'slow');
}
$('#submenu1, #submenu2, #submenu3, #submenu4 ').mouseleave(hidemneu);
$('#btn1').on('mouseover', function() {
hidemneu();
$('#submenu1').offset({
left: $('#btn1').offset().left
});
$('#submenu1').show("fold");
});
$('#btn2').on('mouseover', function() {
hidemneu();
$('#submenu2').offset({
left: $('#btn2').offset().left
});
$('#submenu2').show("fold");
});
$('#btn3').on('mouseover', function() {
hidemneu();
$('#submenu3').offset({
left: $('#btn3').offset().left
});
$('#submenu3').show("fold");
});
$('#btn4').on('mouseover', function() {
hidemneu();
$('#submenu4').offset({
left: $('#btn4').offset().left
});
$('#submenu4').show("fold");
});
$("a").on('mouseover', function(event) {
event.stopPropagation();
});
$("li").on('mouseover', function(event) {
event.stopPropagation();
});
$("ul").on('mouseover', function(event) {
event.stopPropagation();
});
#btn1,
#btn2,
#btn3,
#btn4 {
display: inline-block;
background-color: #ff8d73;
width: 100px;
outline: 1px dashed #000000;
padding-right: 30px;
}
#menu-wrapper {
width: 100%;
background-color: #b7dcff;
text-align: center;
}
#submenu1,
#submenu2,
#submenu3,
#submenu4 {
width: 300px;
height: 200px;
outline: 1px dashed #000000;
float: left;
left: 0;
position: absolute;
display: none;
}
#submenu1 {
background-color: #f00700
}
#submenu2 {
background-color: #a6baf0
}
#submenu3 {
background-color: #7af044
}
#submenu4 {
background-color: #f0dc35
}
#sub_wrapper:after {
clear: both;
}
li,
a {
outline: 1px dashed #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="menu-wrapper">
<div id='btn1'>button 1</div>
<div id='btn2'>button 2</div>
<div id='btn3'>button 3</div>
<div id='btn4'>button 4</div>
</div>
<div id="sub_wrapper">
<div id="submenu1">
<ul>
<li>option 1</li>
<li>oprion 2</li>
</ul>
</div>
<div id="submenu2">
clcik me 1
</div>
<div id="submenu3"></div>
<div id="submenu4"></div>
</div>

Popup with same target location shows appears differently

I have two popups that come from in line code:
<script type="text/javascript">
Sys.debug = true;
var popup;
Sys.require(Sys.components.popup, function () {
popup = Sys.create.popup("#popup", {
parentElementID: "target",
});
});
var popup2;
Sys.require(Sys.components.popup, function () {
popup2 = Sys.create.popup("#popup2", {
parentElementID: "target",
});
});
</script>
This is the "target" they are referencing:
<span id="target" style="position: absolute; top: 50%; left: 50%; margin-top: -125px;
margin-left: -200px;"></span>
Inline Code:
<div id="popup" style="background: #EAFDB3; color: #000; padding: 15px; margin: 0px">
//content
</div>
And:
<div id="popup2" style="background: #EAFDB3; color: #000; padding: 15px; margin: 0px">
//content
</div>
The call:
<script>
Sys.onReady(function () {
popup.show();
})
</script>
Or:
<script>
Sys.onReady(function () {
popup2.show();
})
</script>
When I call the first popup it shows up in the middle of the screen as a popup. The second one (popup2) does not. It shows up at the top left of the screen pushing the rest of the content down. Why?
Edit, here is the css:
#popup
{
width: 400px;
height: 250px;
overflow: scroll;
background-color: #EAFDB3;
border: solid 2px black;
}
#popup2
{
width: 400px;
height: 250px;
background-color: #EAFDB3;
border: solid 2px black;
}

Categories