i add sortable functionality of jquery ui in code. also, great if guys can me apply slide toggle functionality particular clicked div element instead of all. have attached code along query. ## heading ##cheers.
<html> <head> <title>drag , drop</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=lato"> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <style> #body_design { margin-left : 50px; margin-right : 0px; margin-top : 0px; padding : 0px; background-color : #00ffff; } #header { margin-left : -50px; margin-top : 0px; height : 80px; padding-top : 10px; padding-left : 100px; padding-bottom : 20px; background-color : #163c50; } #add { width : 160px; height : 90px; background-color : #233b3b; text-align : center ; font-family : 'lato',serif; font-size : 70px; font-weight : 400; } #container { margin-top : 20px; padding-top : 10px; padding-left : 10px; padding-bottom : 10px; padding-right : 10px; margin : left : 50px; margin-right : 50px; text-align : center; position : relative; } .module { height : 35px; background-color : #1e506b; margin : 60px; font-family : 'lato',serif; font-weight : bold; padding-top : 12px; padding-bottom : 12px; text-align : center; } .deletemodule { float : right; padding-right : 80px; padding-bottom : 40px; } .star { float : right; padding-right : 60px; padding-bottom : 30px; padding-bottom : 40px; } .dropmodule { height : 58px; background-color : #000000; margin-top : -30px; width : 50px; position : absolute; } .panel { height : 30px; background-color : #ffffff; margin : 30px; font-family : 'lato',serif; font-weight : bold; padding-top : 12px; padding-bottom : 12px; text-align : center; } </style> </head> <body id = "body_design"> <div id = "header"> <button id = "add">+</button> </div> <div id = "container" style = "border :2px solid #000000 "></div> <script> var sum = 0; $(document).ready(function(){ $("#add").click(function(){ document.getelementbyid("container"); var adddiv = $('<div class = "module"></div>'); $("#container").append(adddiv); sum = sum + 1; (var = 0; <= sum; i++) { var divinner = document.getelementsbyclassname('module'); divinner[i].innerhtml = i+1; $('<img class = "deletemodule" src="delete.png" width = "20" height = "20">').appendto(divinner[i]); $('<img class = "star "src="starblack.png" width = "20" height = "20" >').appendto(divinner[i]); $('<div class = "dropmodule"></div>').appendto(divinner[i]); $('<div class = "panel" display : "none"></div>').appendto(divinner[i]); $(".panel").hide(); //to change color of star var starclick = document.getelementsbyclassname('star'); $(starclick[i]).click(function(){ if($(this).attr('src') === 'starblack.png') { $(this).attr('src','stargolden.png'); } else { $(this).attr('src','starblack.png'); } }); //to make confirm element var deletebox = document.getelementsbyclassname('deletemodule'); $(deletebox[i]).click(function(){ if(confirm("confirm:delete module") === true) { alert('po'); } }); //to slide module var moduleinner = document.getelementsbyclassname('dropmodule'); var panel1 = document.getelementsbyclassname('panel'); $(moduleinner[i]).click(function(){ {$(panel1[i]).show(); $('.panel').slidetoggle();} }); //to drag , drop module } }); }); </script> </body> </html>
in new added items sortable.
var sum = 0; $(document).ready(function() { $('#container').sortable(); $("#add").on('click', function() { var sum = 0; var adddiv = $('<div class = "module"></div>'); sum = sum + 1; $('<img>', { class: "deletemodule", src: '', width: "20" }).appendto(adddiv); $('<img >', { class: "star", src: 'blackstar', width: "20" }).appendto(adddiv); $('<div class = "dropmodule"></div>').appendto(adddiv); $('<div class = "panel" style="display : none;"></div>').appendto(adddiv); console.log(adddiv); $("#container").append(adddiv); }); $('#container') .on('click', 'img.star', function() { alert(1); if ($(this).attr('src') === 'blackstar') $(this).attr('src', 'goldstar'); else $(this).attr('src', ''); }) .on('click', 'img.deletemodule', function() { if (confirm("confirm:delete module") === true) alert('po'); }) .on('click', '.dropmodule', function() { alert(3); $(this).closest('.panel').show(); $('.panel').slidetoggle(); }); }); #body_design { margin-left: 50px; margin-right: 0px; margin-top: 0px; padding: 0px; background-color: #00ffff; } #header { margin-left: -50px; margin-top: 0px; height: 80px; padding-top: 10px; padding-left: 100px; padding-bottom: 20px; background-color: #163c50; } #add { width: 160px; height: 90px; background-color: #233b3b; text-align: center; font-family: 'lato', serif; font-size: 70px; font-weight: 400; } #container { margin-top: 20px; padding-top: 10px; padding-left: 10px; padding-bottom: 10px; padding-right: 10px; margin: left: 50px; margin-right: 50px; text-align: center; position: relative; } .module { height: 35px; background-color: #1e506b; margin: 60px; font-family: 'lato', serif; font-weight: bold; padding-top: 12px; padding-bottom: 12px; text-align: center; } .deletemodule { float: right; padding-right: 80px; padding-bottom: 40px; } .star { float: right; padding-right: 60px; padding-bottom: 30px; padding-bottom: 40px; } .dropmodule { height: 58px; background-color: #000000; margin-top: -30px; width: 50px; position: absolute; } .panel { height: 30px; background-color: #ffffff; margin: 30px; font-family: 'lato', serif; font-weight: bold; padding-top: 12px; padding-bottom: 12px; text-align: center; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=lato"> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <div id="header"> <button id="add">+</button> </div> <div id="container" style="border :2px solid #000000 "></div>
Comments
Post a Comment