I have four draggable elements and a droppable area currently looking like this (Fiddle) and I would like to improve the experience by adding the following functions:
1) on start: display an alternative element as soon as it is out of its initial position.
2) on drop: draggable element fade away when it is dropped onto droppable container (e.g. ".frame").
What is the best way to do this?
Thanks, any help would be greatly appreciated!
$(document).ready(function() {
$("[id*=draggable]").draggable({
containment: "#area51",
revert: true,
stack: ".frame_type"
});
$(".frame").droppable({
hoverClass: "ui-state-active",
drop: function(event, ui) {
var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable-1") {
$(this).css('background-color', '#f1c40f');
} else if (currentId == "draggable-2") {
$(this).css('background-color', '#e74c3c');
} else if (currentId == "draggable-3") {
$(this).css('background-color', '#3498db');
} else if (currentId == "draggable-4") {
$(this).css('background-color', '#9b59b6');
}
}
});
});
<div class="container-fluid text-center">
<div class="row" id="area51">
<div class="col-xs-8">
<div class="showroom">
<div class="frame">
<img class="display" src="http://placehold.it/200" />
</div>
</div>
</div>
<div class="col-xs-4">
<div class="selection text-center">
<ul class="list-unstyled">
<li id="draggable-1" class="frame_type color-1"></li>
<li id="draggable-2" class="frame_type color-2"></li>
<li id="draggable-3" class="frame_type color-3"></li>
<li id="draggable-4" class="frame_type color-4"></li>
</ul>
</div>
</div>
</div>
</div>
<li/> elements are now shadows of their containing draggable div elements and tweaked styles to overlap them
jQuery .hide() is used to remove them on drag complete
I've also simplified the JS a lot. Basically you have a reference to the element all the time, so don't need to match on ID or search for it.
The CSS could use some love as I haven't spent too long on it. The widths are smaller than in your sample.
http://jsfiddle.net/pratik136/L3abroyy/10/
$(document).ready(function() {
$("[id*=draggable]").draggable({
containment: "#area51",
revert: true,
stack: ".frame_type"
});
$(".frame").droppable({
hoverClass: "ui-state-active",
drop: function(event, ui) {
var elem = ui.draggable;
$(this).css('background-color', elem.css('background-color'));
$(elem.parent()).hide('slow');
}
});
});
/* General Styles */
* {
box-sizing: border-box;
}
html,
body {
background-color: #eee;
color: #666;
}
.showroom {
border: 1px solid #e1e1e1;
border-radius: 5px;
height: 500px;
padding: 100px;
}
.frame {
background-color: #fff;
height: 300px;
width: 300px;
padding: 50px;
border-radius: 5px;
}
.display {
border-radius: 5px;
height: 200px;
width: 200px;
background-color: #fff;
}
.selection {
border-radius: 5px;
height: 500px;
}
.frame_type {
height: 50px;
width: 100%;
border-radius: 5px;
}
li {
height: 50px;
width: 30%;
border-radius: 5px;
}
.color-1,
.color-1 div {
background-color: #f1c40f;
}
.color-2,
.color-2 div {
background-color: #e74c3c;
}
.color-3,
.color-3 div {
background-color: #3498db;
}
.color-4,
.color-4 div {
background-color: #9b59b6;
}
.ui-state-active {
background-color: #e1e1e1 !important;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container-fluid text-center">
<h1>Paintings & Frames: Interactive App</h1>
<div class="row" id="area51">
<div class="col-xs-8">
<div class="showroom">
<div class="frame">
<img class="display" src="http://placehold.it/200" />
</div>
</div>
</div>
<div class="col-xs-4">
<div class="selection text-center">
<h3>Draggable Frames</h3>
<ul class="list-unstyled">
<li class="color-1">
<div id="draggable-1" class="frame_type"></div>
</li>
<li class="color-2">
<div id="draggable-2" class="frame_type"></div>
</li>
<li class="color-3">
<div id="draggable-3" class="frame_type"></div>
</li>
<li class="color-4">
<div id="draggable-4" class="frame_type"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
Related
I have a module where, on hover, I want the content on the right to change (stuff in the blue div in the demo below).
To achieve this, what I'm trying to do is:
If class .active exists on li.tabs then, get the .content from it and display it in the .overview div.
But unsure on how I can get .content when class .active exists in .overview?
I have the following markup (simplified):
// 1. Check if li has class active
if ($('li.tabs').hasClass('active')) {
// 2. get .content div from li where class .active exists
}
.tabs{
border: 1px solid yellow;
}
.list {
border: 1px solid red;
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
border: 1px solid blue;
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
}
<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-flex flex-row">
<div class="list">
<li class="tabs active">
<div class="header"><span>Header</span></div>
<div class="content d-none"><p>content</p></div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content d-none"><p>content 2</p></div>
</li>
</div>
<div class="overview"> </div>
</div>
Complete code for your, together with active class toggle:
var overview = $('.overview');
$('.tabs').each(function(i) {
var thisTab = $(this);
var thisContent = thisTab.find('.content').html();
thisTab.on('mouseenter', function(e) {
thisTab.addClass('active');
overview.html(thisContent);
}).on('mouseleave', function(e) {
thisTab.removeClass('active');
overview.html('');
});
});
.tabs {
border: 1px solid yellow;
}
.tabs.active {
background: none yellow;
}
.list {
border: 1px solid red;
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
border: 1px solid blue;
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-row">
<div class="list">
<li class="tabs">
<div class="header"><span>Header</span></div>
<div class="content d-none">
<p>Content 1</p>
</div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content d-none">
<p>Content 2</p>
</div>
</li>
</div>
<div class="overview"> </div>
</div>
Also on JSFiddle
You can select a children by letting a space between the selectors (in JQuery):
$(".li.tabs.active .content")
will select all the content whom parents have the active class
i'm having a problem with my code: its supposed to have draggabillity from right to left and should be sortable in the left. so far so good.
But im encountering an error: when i drag the items from the left div, another clone appears in the screen and i can't figure it out.
i also need help for adding multiple items from right and using a counter for showing the number of the same item.
here is my code:
$(function drag() {
$(".item").draggable({
cursor: 'move',
helper: 'clone',
appendTo: '#droppable',
});
});
$(function drop() {
$("#droppable").droppable({
accept: '.item',
drop: function(event, ui) {
ui.draggable.clone().appendTo($(this));
}
});
$("#droppable").sortable({
helper: "clone"
});
$("#droppable").disableSelection();
});
#draggable {
width: 150px;
height: 600px;
border: 1px black hidden;
float: right;
}
.item {
width: 70px;
height: 100px;
border-radius: 10%;
margin: auto;
margin-top: 11.5%;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.black {
background-color: black;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
#droppable {
width: 150px;
height: 600px;
border: 1px black solid;
float: left;
}
#div_1 {
background-color: red;
}
#div_2 {
background-color: blue;
}
#div_3 {
background-color: black;
}
#div_4 {
background-color: green;
}
#div_5 {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<body>
<div id="draggable">
<div id="div_1" class="item red" draggable="true">1</div>
<div id="div_2" class="item blue" draggable="true">2</div>
<div id="div_3" class="item black" draggable="true">3</div>
<div id="div_4" class="item green" draggable="true">4</div>
<div id="div_5" class="item yellow" draggable="true">5</div>
</div>
<div id="droppable" ondrop="drop(event)">
</div>
</body>
Here you go with the solution https://jsfiddle.net/0nf83chm/1/
$( ".item" ).draggable({
cursor:'move',
helper:'clone',
appendTo:'#droppable',
});
$("#droppable").droppable({
accept: '.item',
drop:function (event, ui) {
ui.draggable.clone().appendTo($(this));
}
});
$("#droppable").sortable({helper: "clone"});
$("#droppable").disableSelection();
#draggable{width:150px; height:600px; border:1px black hidden; float:right;}
.item{width:70px; height:100px; border-radius:10%; margin:auto; margin-top:11.5%;}
.red{background-color:red;}
.blue{background-color:blue;}
.black{background-color:black;}
.green{background-color:green;}
.yellow{background-color:yellow;}
#droppable{width:150px; height:600px; border:1px black solid; float:left;}
#div_1{background-color:red;}
#div_2{background-color:blue;}
#div_3{background-color:black;}
#div_4{background-color:green;}
#div_5{background-color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="draggable">
<div id="div_1" class="item red" draggable="true">1</div>
<div id="div_2" class="item blue" draggable="true">2</div>
<div id="div_3" class="item black" draggable="true">3</div>
<div id="div_4" class="item green" draggable="true">4</div>
<div id="div_5" class="item yellow" draggable="true">5</div>
</div>
<div id="droppable" ></div>
I am using this code for scroll on an anchor link. It works one time and if click on anchor again it is not working.
$("#erly").on("click", function() {
$(".table-responsive").scrollLeft(0);
});
$("#late").on("click", function() {
$(".table-responsive").scrollLeft(50);
});
You may try unbinding the previous event handlers, like this.
$("#erly").unbind().on("click", function() {
$(".table-responsive").scrollLeft(0);
});
$("#late").unbind().on("click", function() {
$(".table-responsive").scrollLeft(50);
});
div.table-responsive {
background: #ccc none repeat scroll 0 0;
border: 3px solid #666;
margin: 5px;
padding: 5px;
position: relative;
width: 200px;
height: 100px;
overflow: auto;
}
p {
margin: 10px;
padding: 5px;
border: 2px solid #666;
width: 1000px;
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<a id="erly" href="#1">Early</a>
<br />
<a id="late" href="#2">Late</a>
<div class="table-responsive">
<h1>lalala</h1>
<p>Hello 1</p>
</div>
<div class="table-responsive">
<h1>lalala</h1>
<p>Hello 2</p>
</div>
</body>
<div class="col-xs-12 early_late">
<ul class="list-inline">
<li class="pull-left">
<a id="erly" class="erlier" onclick="scrollWin2()">
<span class="glyphicon glyphicon-menu-left span_left"></span> Earlier</a>
</li>
<li class="pull-right" onclick="scrollWin()">
<a id="late">Late <span class="glyphicon glyphicon-menu-right span_right"></span></a>
</li>
</ul>
function scrollWin() {
document.getElementById('scroll').scrollBy(100 , 0);
}
function scrollWin2() {
document.getElementById('scroll').scrollBy(-100 , 0);
}
What I have :
Html
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div class="content1" style="display:none"></div>
<div class="content2" style="display:none"></div>
<div class="content3" style="display:none"></div>
Js
$(document).ready(function() {
$('#content1').click(function() {
$(' .content2, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content1').slideToggle("slow")
}
});
});
$('#content2').click(function() {
$(' .content1, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content2').slideToggle("slow")
}
});
});
$('#content3').click(function() {
$(' .content1, .content2 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content3').slideToggle("slow")
}
});
});
});
What I want
On clicking on a div show its hidden div(content) with slideToggle
if a hidden content of another div is already open then close it with slideUp and open the one you clicked (open only after the slideUp animation is completed)
I managed to get the desired effect with two hidden divs Sample
1but with three i have this Sample 2 auto toggle problem
Help! And if there's a better and simpler alternative to get this effect please suggest. P.S. Sorry for my broken English.
Your code could be refactorized using common classes and then using following logic with promise().done() callback, which will be called only once for all set:
$(document).ready(function() {
$('.for_content').click(function() {
var i = $(this).index('.for_content');
$('.content:not(:eq(' + i + '))').slideUp({
style: "height",
speed: "slow"
}).promise().done(function() {
$('.content').eq(i).slideToggle("slow")
});
});
});
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
}
li {
float: left;
}
.link {
display: inline-block;
color: white;
text-align: center;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
cursor: pointer;
}
.link:hover {
text-shadow: 0px 1px 10px #fff;
}
.content1 {
height: 400px;
width: 100%;
top: 0;
background-color: #333;
}
.content2 {
height: 400px;
width: 100%;
top: 0;
background-color: #444;
}
.content3 {
height: 400px;
width: 100%;
top: 0;
background-color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<ul>
<li>
<span class="link">Home</span>
</li>
<li>
<div class="link for_content" id="content1">Link 1</div>
</li>
<li>
<div class="link for_content" id="content2">Link 2</div>
</li>
<li>
<div class="link for_content" id="content3">Link 3</div>
</li>
</ul>
</div>
<div>
<div class="content content1" style="display: none">
<h1>
CONTENT 1
</h1>
</div>
<div class="content content2" style="display: none">
<h1>
CONTENT 2
</h1>
</div>
<div class="content content3" style="display: none">
<h1>
CONTENT 3
</h1>
</div>
</div>
You can use something like this:
$('div[id^=content]').click(function () {
var name = $(this).attr('id');
$('div[class^=content]:visible').slideUp('slow', function() {
$('.' + name).slideDown('slow');
});
});
I hope it helps. :-).
My 1st droppable div box is working perfectly however the rest of my droppable div boxes aren't. I've been looking through my code and couldn't figure out where the problem is.
When I drag a draggable clone element in the other divs (2,3,4) they go at the very bottom of the page and then when I click the clone it suddenly goes to the first one with out even trying to move it yet.
HELP?
THANK YOU IN ADVANCE.
$(document).ready(function() {
$("#classicTemplate").resizable();
$(".dragImgs").draggable({
helper: "clone",
snap: ".dropTarget",
appendTo: "#classicTemplate",
revert: "invalid"
});
$(".dropTarget").droppable({
accept: ".dragImgs",
hoverClass: "highlight",
drop: function(event, ui) {
var $imgClone = ui.helper.clone();
if (!$imgClone.is(".inside-dropTarget")) {
$(this).append($imgClone.addClass("inside-dropTarget").draggable({
containment: ".dropTarget",
position: "relative"
}));
$imgClone.dblclick(function() {
$imgClone.remove();
});
}
}
}).resizable({
animate: "true",
ghost: "true",
handles: "n, e, s, w, ne, se, sw, nw, all"
});
});
.container {
background-color: #bbb;
}
.imageContainer {
float: left;
margin: 10px;
width: 230px;
background-color: #fff;
}
.imageContainer img {
margin: 10px;
margin-left: 15px;
}
#classicTemplate {
list-style-type: none;
float: right;
margin-top: 10px;
background-color: #ccc;
}
#classicTemplate ul {
list-style-type: none;
padding: 0;
}
.dropTarget {
background-color: #aaa;
margin: 10px;
width: 210px;
height: 143px;
}
.dragImgs {
width: 50px;
height: 50px;
margin: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
<div class="imageContainer">
<div class="dragImgs">
</div>
<div class="dragImgs">
</div>
<div class="dragImgs">
</div>
</div>
<div id="classicTemplate">
<div class="dropTarget pull-left">
1
</div>
<div class="dropTarget pull-left">
2
</div>
<div class="dropTarget pull-left">
3
</div>
<div class="dropTarget pull-left">
4
</div>
</div>
</div>