I added a code sniplet below. I have div-containers with id's that i can drag onto other div objects.
My goal is to add the ID of the draggables into the div-container it is added.
It looks I have to add UI to the drop function but I do not know how to do this in the ondrop call. What would be the right solution?
var overviewJS = new function() {
this.allowDrop = function(ev) {
ev.preventDefault();
$(ev.target).bind('dragover', function(){
$(this).addClass('drag-over');
});
$(ev.target).bind('dragleave', function(){
$(this).removeClass('drag-over');
});
}
this.drag = function(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
this.drop = function(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
$(ev.target).removeClass('drag-over');
$(ev.target).effect("highlight", {color: '#b1b1b1'}, 1000);
}
}
.tbDocument {
background-color: grey;
border: 1px solid #412418;
border-radius: 2px;
width: 120px;
}
.tbProject {
width: 40px;
height: 20px;
border: 1px solid #412418;
border-radius: 2px;
}
[draggable] {
cursor: move;
padding: 10px 20px;
background-color: #666;
border: 2px dashed #eee;
margin: 10px 0;
color: white;
width: 120px;
-webkit-user-drag: element;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<br>
<br>
<div id="1" class="tbDocument" draggable="true">
document to drag
</div>
<div id="2" class="tbDocument" draggable="true">
document to drag
</div>
<div id="3" class="tbDocument" draggable="true">
document to drag
</div>
If I try overviewJS.drop(event,ui) in the ondrop method I receive an error that the UI is not defined.
The Answer was to add ondragstart="overviewJS.drag(event)" This method sets a variable that can later be received.
<div id="3" class="tbDocument" ondragstart="overviewJS.drag(event)" draggable="true">
document to drag
</div>
Related
I have an html page with two buttons which swap the visibility of associated divs. The click event on the buttons work on desktop but not on my Android mobile. How do I get this to work on both desktop and mobile? Also the href link does not work on mobile.
html code extract
<div class="content" id="calculator">
<button id="details" class="tab-button">Details</button>
<button id="result" class="tab-button">Result</button>
<div id="details-content">
Details
</div>
<div id="result-content" class="chart-container" onresize="responsiveFonts()">
<canvas id="StackedbarChartCanvas"></canvas>
</div>
</div>
<p class="center-text">Please read the <a class="link" href="disclaimer.php">Disclaimer</a></p>
css
.tab-button{
border-radius: 5px;
border: 1px solid #000;
padding: 5px 10px;
background: yellow;
font-size: 1em;
cursor: pointer;
}
#details-content {
display: block;
}
#result-content {
display: none;
}
Javascript code
$(document).ready(function() {
$("#result").on("click", function(evt) {
displayResultContent();
});
$(document).on('click', '#details', function() {
displayDetails();
});
});
function displayResultContent() {
document.getElementById("details-content").style.display="none";
document.getElementById("result-content").style.display="block";
calculateResult();
}
function displayDetails() {
document.getElementById("details-content").style.display="block";
document.getElementById("result-content").style.display="none";
}
You have half vanilla javascript code and half jquery . Not all mobile devices work adequately with a pure javascript, almost everything works with jquery.
$(document).ready(function() {
$('#result').click(function() {
$('#details-content').hide();
$('#result-content').show();
calculateResult();
});
$('#details').click(function() {
$('#details-content').show();
$('#result-content').hide();
});
$(window).resize(function() {
responsiveFonts();
});
});
function calculateResult(){
alert('this function -> "calculateResult"'); /* for example... */
}
function responsiveFonts(){
console.log('hello foom funcion "responsiveFonts"');/* for example... */
}
.tab-button{
border-radius: 5px;
border: 1px solid #000;
padding: 5px 10px;
background: yellow;
font-size: 1em;
cursor: pointer;
}
#details-content {
display: block;
}
#result-content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content" id="calculator">
<button id="details" class="tab-button">Details</button>
<button id="result" class="tab-button">Result</button>
<div id="details-content">
Details
</div>
<div id="result-content" class="chart-container">
<canvas id="StackedbarChartCanvas"></canvas>
</div>
</div>
<p class="center-text">Please read the <a class="link" href="/disclaimer.php">Disclaimer</a></p>
I am creating a Kanban Board in HTML/JS/CSS and am close to finishing my MVP here. Everything is working as expected, except for one thing. When I create a new task, I am able to drag it (seemingly) but not DROP it into any other columns. The sample tasks I have do not have this problem and I am ripping my hair out trying to figure out what the issue is. When I attempt to drag and drop newly created tasks into other columns, I get this error:
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at drop (/script.js:31:13)
at HTMLDivElement.ondrop (/:45:112)
I am using basic drag and drop API stuff for HTML and JS and literally only need to make this work in order to finish my MVP. Any help is appreciated. NOTE: The line numbers in the above error change based on what column I try to drop the new task into but the error itself stays the same.
Here is my code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Christopher's Kanban Board</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="new-task-window" id="new_task_form">
<div class="header">
<div class="title">New Task</div>
<button class="btn-close-window" data-target="#new_task_form">X</button>
</div>
<div class="body">
<input type="text" id="new-task-name" />
<input type="submit" value="New Task" id="new-task-submit" />
</div>
</div>
<!--Kanban Board-->
<div class="kanban-container">
<div class="kanban-container-section" id="todo" ondrop="drop(event)" ondragover="allowDrop(event)">
<strong>To Do</strong>
<div class="task-button-block">
<button class="task-button" id="task-button" data-target="#new_task_form">+ New Task</button>
</div>
<div class="task" id="task1" draggable="true" ondragstart="drag(event)">
<span contenteditable="true">Task #1</span>
<!--<button class="edit_button" id="edit_button">Edit</button>-->
</div>
<div class="task" id="task2" draggable="true" ondragstart="drag(event)">
<span contenteditable="true">Task #2</span>
</div>
<div class="task" id="task3" draggable="true" ondragstart="drag(event)">
<span contenteditable="true">Task #3</span>
</div>
<div class="task" id="task4" draggable="true" ondragstart="drag(event)">
<span contenteditable="true">Task #4</span>
</div>
</div>
<div class="kanban-container-section" id="inprogress" ondrop="drop(event)" ondragover="allowDrop(event)">
<strong>In Progress</strong>
</div>
<div class="kanban-container-section" id="done" ondrop="drop(event)" ondragover="allowDrop(event)">
<strong>Done</strong>
</div>
<div class="kanban-container-section" id=" blocked" ondrop="drop(event)" ondragover="allowDrop(event)">
<strong>Blocked</strong>
</div>
</div>
<div id="overlay"></div>
<script src="script.js"></script>
</body>
</html>
script.js:
const task = document.querySelector('.task');
const buttons = document.querySelectorAll("[data-target]");
const close_buttons = document.querySelectorAll(".btn-close-window");
//Allow the New Task Button to open the New Task Creation Window.
buttons.forEach(btn => {
btn.addEventListener('click', () => {
document.querySelector(btn.dataset.target).classList.add("active");
overlay.classList.add("active");
});
});
close_buttons.forEach((btn) => {
btn.addEventListener('click', () => {
document.querySelector(btn.dataset.target).classList.remove("active");
overlay.classList.remove("active");
});
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
const new_task_submit = document.getElementById("new-task-submit");
if(new_task_submit) {
new_task_submit.addEventListener('click', createTask);
}
function createTask() {
const task_div = document.createElement("div");
const input_value = document.getElementById("new-task-name").value;
//Take the text from the above input and create a task with that text.
const text = document.createTextNode(input_value);
task_div.appendChild(text);
//Add the proper class (task in this case) to the newly created task.
task_div.classList.add("task");
//Add the draggable attribute to the newly created task and set it to true to allow drag and drop.
if(task_div){
task_div.setAttribute("draggable", "true");
task_div.setAttribute("contenteditable", "true");
}
//task_div.innerHTML += `
//<div class="task" id="${input_value.toLowerCase().split(" ").join("")}"
//draggable="true" ondragstart="drag(event)>
//<span contenteditable="true">${input_value}</span>
//</div>
//`
//Add the new task to the To Do section of the Kanban Board.
const todo = document.getElementById("todo");
todo.appendChild(task_div);
document.getElementById("new-task-name").value = "";
new_task_form.classList.remove("active");
overlay.classList.remove("active");
}
style.css (the error would indicate that this file is not the problem):
.kanban-container {
display: grid;
grid-auto-columns: 250px;
grid-auto-flow: column;
grid-gap: 8px;
height: 100vh;
overflow: auto;
}
.kanban-container-section {
background: #EBEBEB;
border-radius: 3px;
display: grid;
grid-auto-rows: max-content;
grid-gap: 10px;
padding: 10px;
}
.kanban-container-section strong {
background: #2C89BF;
font-size: 16px;
margin: 0 0 12px 0;
padding: 10px;
}
.task {
background: #FFFFFF;
box-shadow: 0 1px 0 rgba(9,30,66,.25);
border-radius: 3px;
padding: 10px;
}
.task-button {
width: 40%;
background: #FFFFFF;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(9,30,66,.25);
border: 0.1rem;
cursor: pointer;
}
.task.button:active {
transform: scale(0.9);
}
.btn-close-window {
padding: 0.5rem 1rem;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
}
.new-task-window {
width: 450px;
position: fixed;
top: -50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
z-index: 2;
background-color:#FFFFFF;
}
.new-task-window.active {
top: 15%;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid #ccc;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
#overlay.active {
display: block;
}
#new-task-name, #new-task-submit {
padding: 1rem 1rem;
width: 90%;
margin: 0.25rem;
align-items: center;
}
#new-task-submit {
background-color: #2C89BF;
border: none;
color: #FFFFFF;
align-items: center;
}
Again, if anyone knows what my issue is here, the help is greatly appreciated. Thanks!
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 want to execute the function getUser() via an onclick event or a listener. I have already tried both, however, none of them is working.
Below you can find my code. How can I make it work?
I have already tried to use a button and an input instead of a div, not working as well. Not even the listeners if you use a button or an input instead of a div.
$(document).on('focus', '#search_input', function() {
$("#autocomplete-list").show();
});
$(document).on('blur', '#search_input', function() {
$("#autocomplete-list").hide();
});
$(document).on('click', '.search-items', function() {
console.log(this);
});
function getUser(id){
console.log(id + "triggered");
}
/* 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;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-4">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items" style="display: none;">
<div class="search-items" onclick="getUser(2)">2: Max, Mustermann</div>
<div class="search-items" onclick="getUser(3)">3: Tom, Maier</div>
</div>
</div>
</div>
I would appreciate any kind of help.
You need to use stopPropagation() on input and the list elements like so:
$(document).on('focus', '#search_input', function() {
$("#autocomplete-list").show();
});
$(document).on('click', function() {
$("#autocomplete-list").hide();
});
$("#autocomplete-list, #search_input_wrapper").on('click', function() {
event.stopPropagation();
});
function getUser(id) {
console.log(id + "triggered");
}
/* 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;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-4">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items" style="display: none;">
<div class="search-items" onclick="getUser(2)">2: Max, Mustermann</div>
<div class="search-items" onclick="getUser(3)">3: Tom, Maier</div>
</div>
</div>
</div>
stopPropagation stops event bubbling up the DOM tree. In other terms, when you click on search-items the default javascript behavior is to trigger the click on the clicked element parents/grandparents as well.
So when you click on search-items it would trigger click on #search-input. And so, the opened list closes. With stopPropagation() you dismiss this behavior and tell javascript that the click event should only be listened on the clicked element.
In the below code, e is short for event which, in your case, is the click event.
I made some minor changes to your code but you can still use blur and focus. There are many ways to re-write this code but the important thing is to stopPropagation
// changed to click and toggle() to show hide the list
// but you can keep the blur and focus if you like
$(document).on('click', '#search_input', function() {
$("#autocomplete-list").toggle();
});
$(document).on('click', '.search-items', function(e) {
e.stopPropagation()
getUser(e.target.id)
// event = click, target = .search-items, id = the id of the clicked target
// just pass the id to to your getUser function
});
function getUser(id) {
console.log(`user has id ${id}`)
// concatenate strings using new Template Literals
}
/* 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;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-4">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items" style="display: none;">
<div class="search-items" id="2">2: Max, Mustermann</div>
<div class="search-items" id="3">3: Tom, Maier</div>
</div>
</div>
</div>
From jQuery documentation
Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
And MDN documentation
Prevents further propagation of the current event in the capturing and
bubbling phases.
If you have any questions, just ask in the comments below
Using stopPropagation is not necessary.
Your .blur (the first event to happen) prevents a .click on the menu, because it hides it before you even get to click on it. You could add a delay to the to the menu hide, or detect when a user is hovering on an item before hiding it. But now you get into the case where a user is hovering, but presses tab or loses focus some other way, so you'd have to handle that.
var focusedOnSearchItem = false;
$('.search-items').click(function() {
// console.log('search-items click()',this);
$("#autocomplete-list").hide();
});
$('.search-items').mouseenter(function() {
focusedOnSearchItem = true;
});
$('.search-items').mouseleave(function() {
focusedOnSearchItem = false;
});
$('#search_input').focus(function() {
$("#autocomplete-list").show();
});
$('#search_input').blur(function(event) {
if(!focusedOnSearchItem)
$("#autocomplete-list").hide();
});
function getUser(id){
console.log(id + "triggered");
}
/* 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;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-4">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items" style="display: none;">
<div class="search-items" onclick="getUser(2)">2: Max, Mustermann</div>
<div class="search-items" onclick="getUser(3)">3: Tom, Maier</div>
</div>
</div>
</div>
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>