Drag/Drop event only works once on dynamically added divs

Drag/Drop event only works once on dynamically added divs - javascript

I'm using the drag and drop libraries found here: http://threedubmedia.com/code/event/drop/
But I can't seem to get it to work more than once for elements added dynamically.
I've made a jsfiddle to demonstrate the issue.
http://jsfiddle.net/Rn9gQ/
Here you can click the button to add new divs, and you can drag the mouse to select some of them, but you can't select again after finishing dragging the mouse. Even if you make no selection the first time.
Now sure where I'm going wrong, and any help would be greatly appreciated :)
*Edit: Added code below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop.live-2.2.js"></script>
<title>Testpage</title>
</head>
<body>
<script type="text/javascript">
jQuery(function($){
$('#foo').click(function(){
$('#main').append($('<div class="drop">foo</div>'))
});
$( document )
.drag("start",function( ev, dd ){
return $('<div class="selection" />')
.css('opacity', .65 )
.appendTo( document.body );
})
.drag(function( ev, dd ){
$( dd.proxy ).css({
top: Math.min( ev.pageY, dd.startY ),
left: Math.min( ev.pageX, dd.startX ),
height: Math.abs( ev.pageY - dd.startY ),
width: Math.abs( ev.pageX - dd.startX )
});
})
.drag("end",function( ev, dd ){
$( dd.proxy ).remove();
})
.on("dropstart", ".drop", function(){
$(this).addClass("active");
})
.on("drop", ".drop", function(){
$(this).toggleClass("dropped");
})
.on("dropend", ".drop", function(){
$(this).removeClass("active");
});
$.drop({ multi: true });
});
</script>
<h1>Live adding of selectable elements</h1>
<p>Click and drag to select any number of dashed boxes.</p>
<input type="button" id="foo" value="Add a box"/>
<div id="main"></div>
<style type="text/css">
.selection {
position: absolute;
border: 1px solid #89B;
background: #BCE;
background-color: #BEC;
border-color: #8B9;
}
.drop {
float: left;
border: 1px dashed #888;
background: #EEE;
text-align: center;
padding: 20px;
margin: 0 10px 10px 0;
}
.dropped {
background-color: #EBC;
border-color: #B89;
}
.active {
background-color: #CEB;
border-color: #9B8;
}
</style></body>
</html>

Related

Highlight words from multiple input fields simultaneously

I have a problem i'm working on, my program will highlight words if typed in an input field. It wont highlight words from both.(Example Input1 type "Test1", Input2 type "Test2") is there a way to keep the highlighted words active from one field when the user switches to another?
JSBIN: http://jsbin.com/xovisayaso/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="listArray">
<span>Test1</span>
<span>Test2</span>
<span>Test3</span>
</div>
<input type="text" class="form-control" id="userArray">
<input type="text" class="form-control" id="userArray2">
</body>
</html>
<script
$("#userArray, #userArray2").on('change keyup paste', function() {
var input = $(this).val().toLowerCase().split(" ");
$('#listArray span').each(function(){
$(this).removeClass('active');
if( $.inArray( $(this).text().toLowerCase(), input ) != -1 ) {
$(this).addClass('active');}});});
</script>
<style>#list_input > div { border:4px solid; padding: 1em; margin: 1em auto; }
#listArray { overflow: auto; }
#listArray span { display: block; float: left; clear: left; padding:4px; margin:1px; }
#listArray span.active { background: green; }
}
</style>

You can achieve the desired effect by removing the active class whenever the text changes and then checking against both inputs:
$("#userArray, #userArray2").on('change keyup paste', function() {
$('#listArray span').removeClass('active');
$('input').each(function() {
var input = $(this).val().toLowerCase().split(" ");
$('#listArray span').each(function() {
if ($.inArray($(this).text().toLowerCase(), input) != -1) {
$(this).addClass('active');
}
});
});
});
#list_input > div {
border: 4px solid;
padding: 1em;
margin: 1em auto;
}
#listArray {
overflow: auto;
}
#listArray span {
display: block;
float: left;
clear: left;
padding: 4px;
margin: 1px;
}
#listArray span.active {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="listArray">
<span>Test1</span>
<span>Test2</span>
<span>Test3</span>
</div>
<input type="text" class="form-control" id="userArray">
<input type="text" class="form-control" id="userArray2">

Try this code :
$("#userArray, #userArray2").on('change keyup paste', function() {
var input = $("input").map(function(){return $(this).val().toLowerCase();}).get();
$('#listArray span').each(function(){
if( $.inArray( $(this).text().toLowerCase(), input ) != -1 ) {
$(this).addClass('active');
}
else
$(this).removeClass('active');
});
});
Reason : In your code you are only getting single value at a time to compare, rather the both textbox's values !!!

Drag and dropping images between panels

I am trying to create two panels using jQuery UI layout plugin, and then being able to drag & drop images between the two panels, on the right, the dropped image should maintain the position where it was dropped (and be able to drag it and keep the position anywhere on that right panel), then when drag & dropping from right to left panel the image should align like the originals.
This is the code im working on https://jsfiddle.net/Lwbka9ww/4/:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Layout Container</title>
<link type="text/css" rel="stylesheet" href="external/layout/layout-default.css" />
<style type="text/css">
html, body {
background: #666;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: auto; /* when page gets too small */
}
#container {
background: #999;
height: 100%;
margin: 0 auto;
width: 100%;
max-width: 1200px;
min-width: 700px;
_width: 700px; /* min-width for IE6 */
}
.pane {
display: none; /* will appear when layout inits */
}
</style>
<script type="text/javascript" src="external/jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="external/layout/jquery.layout.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#container').layout({
west: { size: "20%" }
});
var $left = $( ".ui-layout-west" ), $right = $( ".ui-layout-center" );
$( ".ui-layout-west .drag" ).draggable({
cancel: "a.ui-icon",
revert: "invalid",
containment: "#container",
cursor: "move",
helper: function () { return $(this).clone().appendTo('body').css('zIndex',5).show(); }
});
$right.droppable({
accept: ".ui-layout-west .drag",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
$(".accept").append(ui.draggable);
$(ui.draggable).css("position", "absolute");
}
});
/*$( ".ui-layout-center .drag" ).draggable({
cancel: "a.ui-icon",
revert: "invalid",
containment: "#container",
cursor: "move",
helper: function () { return $(this).clone().appendTo('body').css('zIndex',5).show(); }
});
//$( "li", $('.ui-layout-center') ).draggable();
function imageDropped( $item ) {
$item.fadeOut('fast', function() {
var $list = $( "ul", $right ).length ? $( "ul", $right ) : $( "<ul class='gallery ui-helper-reset'/>" ).appendTo($right);
$item.appendTo( $list ).fadeIn('fast');
});
}*/
});
</script>
<style>
.drag {
cursor: move;
clear: both;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="pane ui-layout-center">
<div class="accept"></div>
</div>
<div class="pane ui-layout-west">
<div class="drag">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLEBYPEhAQDRsNFQ8WIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6IyszODM4NzQtLisBCgoKDQwOFw8PGjclHyQ3ODcsLDc3LDcsLCw0LCwrNywsKywuKywrLDcrNysrKysrKysrKyssLCsrKyssKysrK//AABEIADwAPAMBIgACEQEDEQH/xAAaAAADAQEBAQAAAAAAAAAAAAADBAUGAgEH/8QAMxAAAQMDAgMGBAUFAAAAAAAAAQIDEQAEIQUSEzFBBiJRYXGBIzKxwRVSkaHwFGJjcvH/xAAZAQACAwEAAAAAAAAAAAAAAAABAgADBQT/xAAgEQACAgICAgMAAAAAAAAAAAAAAQIRAxITMSFRBBRB/9oADAMBAAIRAxEAPwAbNmu82tqPDbRGIO5ccsz9PKm+K2ygIBMIH+0n8s0y4Qi3Q8pKdyjEyTCRzgx60mu4ZO5S1fERK0tgBRSfzEePj1EjrWzsombTY4y2pQClCJAx59aJwqlp1+2t7dKY4j3IpGAD6+Y/fnyrm37VW75RtYUkOQUzmByM/YUn3MSpWTil2VuDXnB8qaS6wptLocSEK5Enb/yhruWR8nf9Dj9aueaC8tgWOT6QEs15wfKnNOUxqFwi3bdDTrh2jeOR9Ote2iVPs8RSUpO5QgT0JH2qLNFukwvFJdoyq9Rc4oaQ+kW20N71Snu9dsT1nP6GmE6nplsw6tK0uXC0wn4Z7p6EgkTyEnMmoT3ZnWFMpS01cvKSDHdCJPgciPUUBvsj2lTBNskbgAd1wiE+OAryGKwH8uck2jtWFE3UX9lwuFLB3Ak4gT4n3NJLu30vpDM7k9E972qvd9ldUbuW3bhyYzySoDwEgn6QMZrxq0TbWPFVx27jjltTaWFDe3tBKiYHMkgZ6cq5oqN9llI0Wh6nqSrVFmli3ULgb1EthawkK2nmMZmEzyPnT+gMXurai5ZsOBtLLhDh4YKggKKSoePIGOWakaVrDyUtotbpTTSG7gRxSiVjKRBjOBHXNB0ztOdN7TtXC0lttx075UUwgnMnqPLl1q3kp0PS/C1qVi8zqNwyzdp4La4DqylW4YyB16043dIaTsbuwhIJwlwczkmtIdF0fXrGz1By0Qwu6PHWULO4nwJBznniDUDtXoDH4uo2ejKcZKEwWypKRjpBq7kpeBaPnuma7ePtpQLcKUmExvCYAxk1Yt7u6d+azSAf8gM+lYBu6uFOQxLqlEY2Tu9o9KrN37wILrYG0ZBBUE9P54VwZMPoQ27bjpg7EgjpumP2plK8d4EH0NYpGrrBG19iR/Yr251QRrD6DDrlsoYgBYBI9M1RxSQbNGtLSxC2woeaQr9opdzTdOeUC5YsqUORLY+tTW9bMgFrcD1BKp94pn8SbIG4lKsY2kn6UEpIljStPsS2ho2qNjY2pAnujnjPjJoS9I01yCpo4ECFKwP1rpL2+YX4D5TM0QboxtIpt5ew7tGUbZeBAdtuIgKkEEpJ9Rn6U0xauNugpCuGobY3/KPYU8lwnBAPtTLcqMEnBileQFE620ptq4U4E7t35hO30I+4ozukW7m5TXw1K6bRk9ckY9qeUIRIJn1rlszM+Jo7MOpPTpCG1DYp0Dr3yM+uOVMIsJIi4V495wrmm0ErQdxoavhqOzEJn3qW2Cgf9MW3Mvr2icSaZTs2jBV5wK4BK8qzQXEgEfzrUJR//9k=" />
</div>
<div class="drag">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKDplYgDLBnlw0jBK06LriNY4eTqQtsf25U5VV95zAJBB9EavVhQ" />
</div>
<div class="drag">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-uqB0D8Xnjcao1kZ0W2P-uftmFxJlq6fTATe0YCJX3tdFaL8H" />
</div>
</div>
</div>
</body>
</html>
My main problem is keeping the initial position and maintaining drag changes on the left panel, I haven't worked on right to left drag & drop yet.

It has the different layouts between when I press [enter] and click [refresh]

When I practice waterfall flow layout, it has a problemlike this:
When the page is first loaded or I click [refresh] or press [F5], it looks bad. Each column of the images stacks!
But when I press [enter] in address bar or scroll with mouse, it looks good.
So how can I solve the problem? Thanks a lot!
var dataPic=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"];
var curtIndex=0;
$(document).ready(function(){
$(window).on("load",function(){
init(); //initializes the display with 30 pictures，call loadPic()
placePic(); //layout
});
$(window).scroll(function(){
while(scrollSlide()){ //whether it needs loading more pictures
loadPic(); //div and img can be loaded dynamically
}
placePic(); //layout for the elements that are just loaded
});
});
function init(){
var i=30;
do{
loadPic();
}while(i-- >= 0);
placePic();
}
function initSlide(){
var box=$(".box");
var lastboxHeight=box.last().get(0).offsetTop;
var documentHeight=$(document).height();
return (lastboxHeight<documentHeight)?true:false;
}
function currentIndex(){
if(curtIndex==9){
curtIndex=0;
}
return curtIndex;
}
function loadPic(){
var boxadd=$("<div>").addClass("box").appendTo($("#container"));
var current=$("<div>").addClass("pic").appendTo(boxadd);
$("<img>").attr("src","./img/"+dataPic[currentIndex()]).appendTo(current);
curtIndex++;
}
function placePic(){
var box=$(".box");
var boxWidth=box.eq(0).width();
var num=Math.floor($(window).width()/boxWidth);
var boxArr=[];
box.each(function(index,value){
var boxHeight=box.eq(index).outerHeight(true);
if(index<num){
boxArr[index]=boxHeight;
}
else{
var minboxHeight=Math.min.apply(null,boxArr);
var minboxIndex=$.inArray(minboxHeight,boxArr);
$(value).css({
"margin":"10px",
"box-shadow":"2px 2px 2px rgba(0,0,0,.3)",
"border-radius": "4px",
"position":"absolute",
"top":minboxHeight,
"left":box.eq(minboxIndex).position().left
});
boxArr[minboxIndex]+=box.eq(index).outerHeight(true);
}
});
}
function scrollSlide(){
var box=$(".box");
var lastboxHeight=box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
var documentHeight=$(window).height();
var scrollHeight=$(window).scrollTop();
return (lastboxHeight<documentHeight+scrollHeight)?true:false;
}
*{
margin: 0px;
padding: 0px;
}
#container{
margin-left: auto;
margin-right: auto;
}
.box{
margin:10px;
box-shadow:2px 2px 2px rgba(0,0,0,.3);
border-radius: 4px;
position: relative;
float: left;
}
.pic img{
margin: 0px;
padding: 0px;
width:200px;
height: auto;
vertical-align: bottom;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body bgcolor="">
<div id="container">
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script src="testjs.js"></script>
</body>
</html>

jQuery focus is not working?

I have been trying to add focus function to my specific input i.e want to show a div on focus with class as : .search_by_name but it's not working so if you people please take a look at my code that what I am doing wrong please?
Here is code as :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.search_by_business_name {
background: #474747;
display: none;
width: 297px;
margin-left: 179px;
margin-top: 15px;
height: 15px;
position: absolute;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.arrow-up_search_by_business_name {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #474747;
position: relative;
top: -8px;
left: 20px;
}
.search_by_business_name_text {
background: #99cc33;
font-family: Arial;
font-style: italic;
color: #fff;
padding: 7px;
font-size: 14px;
text-align: left;
padding-left: 15px;
margin-top: -4px;
}
</style>
<input type="text" class="search_input" id="search_by_business_name_input" placeholder="Hi Ruyben, what do you want to find today ?">
<div class="search_by_business_name">
<div class="arrow-up_search_by_business_name"></div><!-- end div arrow-up_search_by_business_name -->
<div class="search_by_business_name_text">Search by business name, or keyword</div><!-- end div search_by_business_name_text -->
</div><!-- end div search_by_business_name -->
<script>
$( "#search_by_business_name_input" ).focus(function() {
$( this ).next( ".search_by_business_name" ).css( "display", "block" );});
</script>
Please have a look at live version as : http://huntedhunter.com/waseem_jobs/pacific_site/index.html

As I explained in the comments, you should not use .next() as the element you are looking for is not the next sibling of the target element.
Also .focus() takes only one function as argument, you need to use .blur() to hide the element
$("#search_by_business_name_input").focus(function () {
$(".search_by_business_name").show();
}).blur(function () {
$(".search_by_business_name").hide();
});

The script should be inside the <body> tag.
In your page the script is after </body></html>
<script>
$( document ).ready(function() {
$( "#search_by_business_name_input" )
.focus(function() {
$( ".search_by_business_name" ).show();
})
.blur(function() {
$( ".search_by_business_name" ).hide();
});
});
</script>
</body>
</html>
Edit:
Of course it does not work.
Have you read the documentation for $.next()?
.next()
Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
Replace this:
$( this ).next( ".search_by_business_name" ).css( "display", "block" );
With:
$( ".search_by_business_name" ).css( "display", "block" );
Edit2:
Wrap your code in $.ready:
$( document ).ready(function() {
$( "#search_by_business_name_input" )
.focus(function() {
$( ".search_by_business_name" ).show();
})
.blur(function() {
$( ".search_by_business_name" ).hide();
});
});

You should put
<script>
$( "#search_by_business_name_input" ).focus(function() {
$( ".search_by_business_name" ).show();
});
</script>
at the bottom of body element, because when excute this code,
$("#search_by_business_name_input" ) = []
or
you can write it like this
$(document).on("focus", "#search_by_business_name_input", function(){
$( ".search_by_business_name" ).show();
})

Alternative to select menu

I'm in disbelief that I wasn't able to find this somewhere but I've been looking for a while and can't find anything, so I figured it would be worth asking here. What I need:
The functionality of a <select> menu
"options" that I can put elements in
Not Twitter Bootstrap
That's all. I have a list of saved items that you can select from, but I also want to add a little 'x' icon or whatever in the option to delete it.
I figured someone would have already made this from a <ul> or whatever, but if it's out there I couldn't find it. The only working example of this I found needed Bootstrap, which I don't want to use. I can write this myself, but it would be hacky and I'm hoping it already exists and I can save myself the trouble. Thanks!

You might be able to tweak the selectmenu from jqueryui. http://jqueryui.com/selectmenu/#custom_render
I got it started, check out the fiddle.
http://jsfiddle.net/htqdmdtd/3/
CODE
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<script>
$(function() {
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function( ul, item ) {
var li = $( "<li>", { text: item.label } );
if ( item.disabled ) {
li.addClass( "ui-state-disabled" );
}
$( "<span>", {
style: item.element.attr( "data-style" ),
"class": "ui-icon " + item.element.attr( "data-class" )
})
.appendTo( li );
return li.appendTo( ul );
}
});
$( "#filesA" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons" );
$( "#filesB" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons customicons" );
$( "#people" )
.iconselectmenu()
.iconselectmenu( "menuWidget")
.addClass( "ui-menu-icons avatar" );
});
</script>
<style>
h2 {
margin: 30px 0 0 0
}
fieldset {
border: 0;
}
label {
display: block;
}
select {
width: 200px;
}
/* select with custom icons */
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item {
padding: 0.5em 0 0.5em 3em;
}
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
height: 24px;
width: 24px;
top: 0.1em;
}
.ui-icon.video {
background: url("images/24-video-square.png") 0 0 no-repeat;
}
.ui-icon.podcast {
background: url("images/24-podcast-square.png") 0 0 no-repeat;
}
.ui-icon.rss {
background: url("images/24-rss-square.png") 0 0 no-repeat;
}
/* select with CSS avatar icons */
option.avatar {
background-repeat: no-repeat !important;
padding-left: 20px;
}
.avatar .ui-icon {
background-position: left top;
}
</style>
</head>
<body>
<div class="demo">
<form action="#">
<h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
<fieldset>
<label for="people">Select a Person:</label>
<select name="people" id="people">
<option value="1" data-class="avatar" data-style="background-image: url(&apos;http://retsmgr.discovermls.com/images/delete-16x16.gif&apos;);">John Resig</option>
<option value="2" data-class="avatar" data-style="background-image: url(&apos;http://retsmgr.discovermls.com/images/delete-16x16.gif&apos;);">Tauren Mills</option>
<option value="3" data-class="avatar" data-style="background-image: url(&apos;http://retsmgr.discovermls.com/images/delete-16x16.gif&apos;);">Jane Doe</option>
</select>
</fieldset>
</form>
</div>
JS
$('#people-menu').click(function(event){
if($(event.target).is('span.avatar')) {
$(event.target).parent('li').hide();
}
});

Develop Reference

JavaScript is the programming language of the Web.

Drag/Drop event only works once on dynamically added divs - javascript

Related

Highlight words from multiple input fields simultaneously

Drag and dropping images between panels

It has the different layouts between when I press [enter] and click [refresh]

jQuery focus is not working?

Alternative to select menu

Categories

Resources