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>
Related
I have written a own search which is actually getting the results by an Ajax. I have rewritten that code from Ajax to jQuery to show you what my fault is. Run the code below with Google Chrome or Safari. It will work. Either Type Max or Jil in the search bar and you will get an result. But if you try to get a result with Mozilla Firefox, the result box is not showing up. It gets set to display: none again and again... why is that an how can I fix that?
Here is my code:
var results = {
Max: '<div class="search-items">2: Max</div>',
Jil: '<div class="search-items">3: Jil</div>'
}
$(document).on('focus', '#search_input', function() {
$("#autocomplete-list").css("display", "block");
//$("#autocomplete-list").show();
});
$(document).on('keyup', '#search_input', function() {
var serach_request = $("#search_input").val();
if(serach_request in results){
console.log(serach_request);
$("#autocomplete-list").html(results[serach_request]);
}else{
$("#autocomplete-list").empty();
}
});
$(document).on('click', function() {
$("#autocomplete-list").hide();
});
$("#autocomplete-list, #search_input_wrapper").on('click', function() {
event.stopPropagation();
});
/* Autocomplete Stlying */
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 15px;
right: 15px;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
text-align: left;
}
/* When hovering an item: */
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
/* When navigating through the items using the arrow keys: */
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<div class="row" id="actions">
<div class="col-md-8 text-right">
<div class="col-md-4 col-sm-12">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" autocomplete="off" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Kind regards
Add event parameter to the function call . An error was showing in the console regarding the same.
$("#autocomplete-list, #search_input_wrapper").on('click', function(event) {
event.stopPropagation();
});
var results = {
Max: '<div class="search-items">2: Max</div>',
Jil: '<div class="search-items">3: Jil</div>'
}
$(document).on('focus', '#search_input', function() {
$("#autocomplete-list").css("display", "block");
//$("#autocomplete-list").show();
});
$(document).on('keyup', '#search_input', function() {
var serach_request = $("#search_input").val();
if (serach_request in results) {
console.log(serach_request);
$("#autocomplete-list").html(results[serach_request]);
} else {
$("#autocomplete-list").empty();
}
});
$(document).on('click', function() {
$("#autocomplete-list").hide();
});
$("#autocomplete-list, #search_input_wrapper").on('click', function(event) {
event.stopPropagation();
});
/* Autocomplete Stlying */
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 15px;
right: 15px;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
text-align: left;
}
/* When hovering an item: */
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
/* When navigating through the items using the arrow keys: */
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="row" id="actions">
<div class="col-md-8 text-right">
<div class="col-md-4 col-sm-12">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" autocomplete="off" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to create a draggable element which will have a tail on its left side. When I will be dragging it on the right side the associated tail should dynamically expand making sure it is attached to the dragged element.
Here is the sample which I was trying:
$(function() {
$("#draggable").draggable({
axis: 'x',
containment: $('this').closest('#container'),
cursor: '-moz-grabbing'
});
});
#container{
height: 100px;
border: 1px solid black;
}
#draggable {
height: 100%;
width: 80px;
border:0.2px solid black;
}
#draggableTail {
height:0.1px;
width:100px;
margin-top:40px;
border:2px solid black;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id='container'>
<div id='draggableTail'>
</div>
<div id="draggable">
<div id="someContent">
<p>
HAVE A GOOD DAY
</p>
</div>
</div>
</div>
I try to select a div which has a specific html. Look at my example:
$("#clickMe").click(function(){
$("div:contains('heinrich')").css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
jsFiddle: https://jsfiddle.net/fj1brnv8/2/
However, the parent div's color also changes.
Is there a way to only select the element itself, I am not allowed to use ID's.
Better mention the className in the selector $("div .normal:contains('heinrich')")
$("#clickMe").click(function(){
$("div .normal:contains('heinrich')").css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
In your exable should be different selector:
$("#masterdiv > div:contains('heinrich')")
Just change the root selector.
UPDATE
Select every div and use the filter method.
Clone the div you're filtering, select all the children (nested divs), remove them then "come back" to the parent cloned div and retrieve the text.
Having the text, compare the contents with the text you're searching.
$("#clickMe").click(function(){
$("div").filter(function(idx, val) {
return /heinrich/gi.test($(this).clone().children().remove().end().text());
}).css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
This should do
$("#clickMe").click(function(){
$("#masterdiv div:contains('heinrich')").css("background-color", "limegreen")
});
Since you didn't want to use ids I can suggest you to try this.
$('div > div:contains(heinrich)').css("background-color", "limegreen")
Working Fiddle: https://jsfiddle.net/g50cfqzw/
Try this
$("#clickMe").click(function(){
var html_trg="heinrich";
$('.normal').each(function(i,u){
var divtxt=$(u).html();
divtxt=$.trim(divtxt);
if(divtxt==html_trg){
$(u).css("background-color", "limegreen");
}
});
});
try this it will work
$("#clickMe").click(function(){
$("div#masterdiv").find('div.normal:contains(heinrich)').css("background-color", "limegreen")
});
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>
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>