代码拉取完成，页面将自动刷新
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
<title>Dragula Drag and Drop | CORK - Multipurpose Bootstrap Dashboard Template </title>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="plugins/drag-and-drop/dragula/dragula.css" rel="stylesheet" type="text/css" />
<link href="plugins/drag-and-drop/dragula/example.css" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL STYLES -->
</head>
<body>
<!-- BEGIN NAVBAR -->
<div class="header-container fixed-top">
<header class="header navbar navbar-expand-sm">
<ul class="navbar-item theme-brand flex-row text-center">
<li class="nav-item theme-logo">
<a href="index.html">
<img src="assets/img/logo.svg" class="navbar-logo" alt="logo">
</a>
</li>
<li class="nav-item theme-text">
<a href="index.html" class="nav-link"> CORK </a>
</li>
</ul>
<ul class="navbar-item flex-row ml-md-0 ml-auto">
<li class="nav-item align-self-center search-animated">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search toggle-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<form class="form-inline search-full form-inline search" role="search">
<div class="search-bar">
<input type="text" class="form-control search-form-control ml-lg-auto" placeholder="Search...">
</div>
</form>
</li>
</ul>
<ul class="navbar-item flex-row ml-md-auto">
<li class="nav-item dropdown language-dropdown">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" id="language-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="assets/img/ca.png" class="flag-width" alt="flag">
</a>
<div class="dropdown-menu position-absolute" aria-labelledby="language-dropdown">
<a class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/de.png" class="flag-width" alt="flag"> <span class="align-self-center"> German</span></a>
<a class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/jp.png" class="flag-width" alt="flag"> <span class="align-self-center"> Japanese</span></a>
<a class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/fr.png" class="flag-width" alt="flag"> <span class="align-self-center"> French</span></a>
<a class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/ca.png" class="flag-width" alt="flag"> <span class="align-self-center"> English</span></a>
</div>
</li>
<li class="nav-item dropdown message-dropdown">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" id="messageDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</a>
<div class="dropdown-menu p-0 position-absolute" aria-labelledby="messageDropdown">
<div class="">
<a class="dropdown-item">
<div class="">
<div class="media">
<div class="user-img">
<img class="usr-img rounded-circle" src="assets/img/profile-11.jpeg.jpg" alt="profile">
</div>
<div class="media-body">
<div class="">
<h5 class="usr-name">Kara Young</h5>
<p class="msg-title">ACCOUNT UPDATE</p>
</div>
</div>
</div>
</div>
</a>
<a class="dropdown-item">
<div class="">
<div class="media">
<div class="user-img">
<img class="usr-img rounded-circle" src="assets/img/profile-16.jpeg.jpg" alt="profile">
</div>
<div class="media-body">
<div class="">
<h5 class="usr-name">Daisy Anderson</h5>
<p class="msg-title">ACCOUNT UPDATE</p>
</div>
</div>
</div>
</div>
</a>
<a class="dropdown-item">
<div class="">
<div class="media">
<div class="user-img">
<img class="usr-img rounded-circle" src="assets/img/profile-34.jpeg.jpg" alt="profile">
</div>
<div class="media-body">
<div class="">
<h5 class="usr-name">Oscar Garner</h5>
<p class="msg-title">ACCOUNT UPDATE</p>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown notification-dropdown">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" id="notificationDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg><span class="badge badge-success"></span>
</a>
<div class="dropdown-menu position-absolute" aria-labelledby="notificationDropdown">
<div class="notification-scroll">
<div class="dropdown-item">
<div class="media">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<div class="media-body">
<div class="notification-para"><span class="user-name">Shaun Park</span> likes your photo.</div>
</div>
</div>
</div>
<div class="dropdown-item">
<div class="media">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
<div class="media-body">
<div class="notification-para"><span class="user-name">Kelly Young</span> shared your post</div>
</div>
</div>
</div>
<div class="dropdown-item">
<div class="media">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
<div class="media-body">
<div class="notification-para"><span class="user-name">Kelly Young</span> mentioned you in comment.</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown user-profile-dropdown">
<a href="javascript:void(0);" class="nav-link dropdown-toggle user" id="userProfileDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<img src="assets/img/profile-16.jpeg.jpg" alt="avatar">
</a>
<div class="dropdown-menu position-absolute" aria-labelledby="userProfileDropdown">
<div class="">
<div class="dropdown-item">
<a class="" href="user_profile.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> My Profile</a>
</div>
<div class="dropdown-item">
<a class="" href="apps_mailbox.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-inbox"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg> Inbox</a>
</div>
<div class="dropdown-item">
<a class="" href="auth_lockscreen.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> Lock Screen</a>
</div>
<div class="dropdown-item">
<a class="" href="auth_login.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg> Sign Out</a>
</div>
</div>
</div>
</li>
</ul>
</header>
</div>
<!-- END NAVBAR -->
<!-- BEGIN NAVBAR -->
<div class="sub-header-container">
<header class="header navbar navbar-expand-sm">
<a href="javascript:void(0);" class="sidebarCollapse" data-placement="bottom"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></a>
<ul class="navbar-nav flex-row">
<li>
<div class="page-header">
<nav class="breadcrumb-one" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0);">Drag and Drop</a></li>
<li class="breadcrumb-item active" aria-current="page"><span>Dragula</span></li>
</ol>
</nav>
</div>
</li>
</ul>
</header>
</div>
<!-- END NAVBAR -->
<!-- BEGIN MAIN CONTAINER -->
<div class="main-container" id="container">
<div class="overlay"></div>
<div class="search-overlay"></div>
<!-- BEGIN SIDEBAR -->
<div class="sidebar-wrapper sidebar-theme">
<nav id="sidebar">
<div class="shadow-bottom"></div>
<ul class="list-unstyled menu-categories" id="accordionExample">
<li class="menu">
<a href="#dashboard" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
<span>Dashboard</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="dashboard" data-parent="#accordionExample">
<li>
<a href="index.html"> Sales </a>
</li>
<li>
<a href="index2.html"> Analytics </a>
</li>
</ul>
</li>
<li class="menu">
<a href="#app" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cpu"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
<span>Apps</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="app" data-parent="#accordionExample">
<li>
<a href="apps_chat.html"> Chat </a>
</li>
<li>
<a href="apps_mailbox.html"> Mailbox </a>
</li>
<li>
<a href="apps_todoList.html"> Todo List </a>
</li>
<li>
<a href="apps_notes.html"> Notes </a>
</li>
<li>
<a href="apps_scrumboard.html">Scrumboard</a>
</li>
<li>
<a href="apps_contacts.html"> Contacts </a>
</li>
<li>
<a href="apps_invoice.html"> Invoice List </a>
</li>
<li>
<a href="apps_calendar.html"> Calendar </a>
</li>
</ul>
</li>
<li class="menu">
<a href="#components" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-box"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
<span>Components</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="components" data-parent="#accordionExample">
<li>
<a href="component_tabs.html"> Tabs </a>
</li>
<li>
<a href="component_accordion.html"> Accordions </a>
</li>
<li>
<a href="component_modal.html"> Modals </a>
</li>
<li>
<a href="component_cards.html"> Cards </a>
</li>
<li>
<a href="component_bootstrap_carousel.html">Carousel</a>
</li>
<li>
<a href="component_blockui.html"> Block UI </a>
</li>
<li>
<a href="component_countdown.html"> Countdown </a>
</li>
<li>
<a href="component_counter.html"> Counter </a>
</li>
<li>
<a href="component_sweetalert.html"> Sweet Alerts </a>
</li>
<li>
<a href="component_timeline.html"> Timeline </a>
</li>
<li>
<a href="component_snackbar.html"> Notifications </a>
</li>
<li>
<a href="component_session_timeout.html"> Session Timeout </a>
</li>
<li>
<a href="component_media_object.html"> Media Object </a>
</li>
<li>
<a href="component_list_group.html"> List Group </a>
</li>
<li>
<a href="component_pricing_table.html"> Pricing Tables </a>
</li>
<li>
<a href="component_lightbox.html"> Lightbox </a>
</li>
</ul>
</li>
<li class="menu">
<a href="#elements" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
<span>Elements</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="elements" data-parent="#accordionExample">
<li>
<a href="element_alerts.html"> Alerts </a>
</li>
<li>
<a href="element_avatar.html"> Avatar </a>
</li>
<li>
<a href="element_badges.html"> Badges </a>
</li>
<li>
<a href="element_breadcrumbs.html"> Breadcrumbs </a>
</li>
<li>
<a href="element_buttons.html"> Buttons </a>
</li>
<li>
<a href="element_buttons_group.html"> Button Groups </a>
</li>
<li>
<a href="element_color_library.html"> Color Library </a>
</li>
<li>
<a href="element_dropdown.html"> Dropdown </a>
</li>
<li>
<a href="element_infobox.html"> Infobox </a>
</li>
<li>
<a href="element_jumbotron.html"> Jumbotron </a>
</li>
<li>
<a href="element_loader.html"> Loader </a>
</li>
<li>
<a href="element_pagination.html"> Pagination </a>
</li>
<li>
<a href="element_popovers.html"> Popovers </a>
</li>
<li>
<a href="element_progress_bar.html"> Progress Bar </a>
</li>
<li>
<a href="element_search.html"> Search </a>
</li>
<li>
<a href="element_tooltips.html"> Tooltips </a>
</li>
<li>
<a href="element_treeview.html"> Treeview </a>
</li>
<li>
<a href="element_typography.html"> Typography </a>
</li>
</ul>
</li>
<li class="menu">
<a href="fonticons.html" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-target"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg>
<span>Font Icons</span>
</div>
</a>
</li>
<li class="menu">
<a href="widgets.html" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>
<span>Widgets</span>
</div>
</a>
</li>
<li class="menu">
<a href="table_basic.html" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layout"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
<span>Tables</span>
</div>
</a>
</li>
<li class="menu">
<a href="#datatables" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
<span>DataTables</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="datatables" data-parent="#accordionExample">
<li>
<a href="table_dt_basic.html"> Basic </a>
</li>
<li>
<a href="table_dt_basic-dark.html"> Dark </a>
</li>
<li>
<a href="table_dt_ordering_sorting.html"> Order Sorting </a>
</li>
<li>
<a href="table_dt_multi-column_ordering.html"> Multi-Column </a>
</li>
<li>
<a href="table_dt_multiple_tables.html"> Multiple Tables</a>
</li>
<li>
<a href="table_dt_alternative_pagination.html"> Alt. Pagination</a>
</li>
<li>
<a href="table_dt_custom.html"> Custom </a>
</li>
<li>
<a href="table_dt_range_search.html"> Range Search </a>
</li>
<li>
<a href="table_dt_html5.html"> HTML5 Export </a>
</li>
<li>
<a href="table_dt_live_dom_ordering.html"> Live DOM ordering </a>
</li>
<li>
<a href="table_dt_miscellaneous.html"> Miscellaneous </a>
</li>
</ul>
</li>
<li class="menu">
<a href="#forms" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
<span>Forms</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="forms" data-parent="#accordionExample">
<li>
<a href="form_bootstrap_basic.html"> Basic </a>
</li>
<li>
<a href="form_input_group_basic.html"> Input Group </a>
</li>
<li>
<a href="form_layouts.html"> Layouts </a>
</li>
<li>
<a href="form_validation.html"> Validation </a>
</li>
<li>
<a href="form_input_mask.html"> Input Mask </a>
</li>
<li>
<a href="form_bootstrap_select.html"> Bootstrap Select </a>
</li>
<li>
<a href="form_select2.html"> Select2 </a>
</li>
<li>
<a href="form_bootstrap_touchspin.html"> TouchSpin </a>
</li>
<li>
<a href="form_maxlength.html"> Maxlength </a>
</li>
<li>
<a href="form_checkbox_radio.html"> Checkbox & Radio </a>
</li>
<li>
<a href="form_switches.html"> Switches </a>
</li>
<li>
<a href="form_wizard.html"> Wizards </a>
</li>
<li>
<a href="form_fileupload.html"> File Upload </a>
</li>
<li>
<a href="form_quill.html"> Quill Editor </a>
</li>
<li>
<a href="form_markdown.html"> Markdown Editor </a>
</li>
<li>
<a href="form_date_range_picker.html"> Date & Range Picker </a>
</li>
<li>
<a href="form_clipboard.html"> Clipboard </a>
</li>
<li>
<a href="form_typeahead.html"> Typeahead </a>
</li>
</ul>
</li>
<li class="menu">
<a href="#users" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
<span>Users</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="users" data-parent="#accordionExample">
<li>
<a href="user_profile.html"> Profile </a>
</li>
<li>
<a href="user_account_setting.html"> Account Settings </a>
</li>
</ul>
</li>
<li class="menu">
<a href="#pages" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
<span>Pages</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="pages" data-parent="#accordionExample">
<li>
<a href="pages_helpdesk.html"> Helpdesk </a>
</li>
<li>
<a href="pages_contact_us.html"> Contact Form </a>
</li>
<li>
<a href="pages_faq.html"> FAQ </a>
</li>
<li>
<a href="pages_faq2.html"> FAQ 2 </a>
</li>
<li>
<a href="pages_privacy.html"> Privacy Policy </a>
</li>
<li>
<a href="pages_coming_soon.html"> Coming Soon </a>
</li>
<li>
<a href="#pages-error" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Error <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg> </a>
<ul class="collapse list-unstyled sub-submenu" id="pages-error" data-parent="#pages">
<li>
<a href="pages_error404.html"> 404 </a>
</li>
<li>
<a href="pages_error500.html"> 500 </a>
</li>
<li>
<a href="pages_error503.html"> 503 </a>
</li>
<li>
<a href="pages_maintenence.html"> Maintanence </a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<a href="#authentication" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
<span>Authentication</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="authentication" data-parent="#accordionExample">
<li>
<a href="auth_login_boxed.html"> Login Boxed </a>
</li>
<li>
<a href="auth_register_boxed.html"> Register Boxed </a>
</li>
<li>
<a href="auth_lockscreen_boxed.html"> Unlock Boxed </a>
</li>
<li>
<a href="auth_pass_recovery_boxed.html"> Recover ID Boxed </a>
</li>
<li>
<a href="auth_login.html"> Login Cover </a>
</li>
<li>
<a href="auth_register.html"> Register Cover </a>
</li>
<li>
<a href="auth_lockscreen.html"> Unlock Cover </a>
</li>
<li>
<a href="auth_pass_recovery.html"> Recover ID Cover </a>
</li>
</ul>
</li>
<li class="menu">
<a href="dragndrop_dragula.html" data-active="true" aria-expanded="true" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-move"><polyline points="5 9 2 12 5 15"></polyline><polyline points="9 5 12 2 15 5"></polyline><polyline points="15 19 12 22 9 19"></polyline><polyline points="19 9 22 12 19 15"></polyline><line x1="2" y1="12" x2="22" y2="12"></line><line x1="12" y1="2" x2="12" y2="22"></line></svg>
<span>Drag and Drop</span>
</div>
</a>
</li>
<li class="menu">
<a href="map_jvector.html" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg>
<span>Maps</span>
</div>
</a>
</li>
<li class="menu">
<a href="charts_apex.html" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
<span>Charts</span>
</div>
</a>
</li>
<li class="menu">
<a href="#starter-kit" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-terminal"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
<span>Starter Kit</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul class="collapse submenu list-unstyled" id="starter-kit" data-parent="#accordionExample">
<li>
<a href="starter_kit_blank_page.html"> Blank Page </a>
</li>
<li>
<a href="starter_kit_breadcrumbs.html"> Breadcrumbs </a>
</li>
<li>
<a href="starter_kit_boxed.html"> Boxed </a>
</li>
<li>
<a href="starter_kit_alt_menu.html"> Alternate Menu </a>
</li>
</ul>
</li>
<li class="menu">
<a href="" aria-expanded="false" class="dropdown-toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
<span>Documentation</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
<!-- END SIDEBAR -->
<!-- BEGIN CONTENT AREA -->
<div id="content" class="main-content">
<div class="layout-px-spacing">
<div class="row" id="cancel-row">
<div class="col-lg-12 layout-spacing layout-top-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Dragula</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class='parent ex-1'>
<div class="row">
<div class="col-sm-6">
<div id='left-defaults' class='dragula'>
<div class="media d-md-flex d-block text-sm-left text-center">
<img alt="avatar" src="assets/img/profile-2.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-xl-flex d-block justify-content-between">
<div class="">
<h6 class="">Need to be approved</h6>
<p class="">Kelly Young</p>
</div>
<div>
<button class="btn btn-dark btn-sm">View</button>
</div>
</div>
</div>
</div>
<div class="media d-md-flex d-block text-sm-left text-center">
<img alt="avatar" src="assets/img/profile-3.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-xl-flex d-block justify-content-between">
<div class="">
<h6 class="">Meeting with client</h6>
<p class="">Andy King</p>
</div>
<div>
<button class="btn btn-dark btn-sm">View</button>
</div>
</div>
</div>
</div>
<div class="media d-md-flex d-block text-sm-left text-center">
<img alt="avatar" src="assets/img/profile-4.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-xl-flex d-block justify-content-between">
<div class="">
<h6 class="">Project Detail</h6>
<p class="">Judy Holmes</p>
</div>
<div>
<button class="btn btn-dark btn-sm">View</button>
</div>
</div>
</div>
</div>
<div class="media d-md-flex d-block text-sm-left text-center">
<img alt="avatar" src="assets/img/profile-5.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-xl-flex d-block justify-content-between">
<div class="">
<h6 class="">Edited Post Apporval</h6>
<p class="">Vincent Carpenter</p>
</div>
<div>
<button class="btn btn-dark btn-sm">View</button>
</div>
</div>
</div>
</div>
<div class="media d-md-flex d-block text-sm-left text-center">
<img alt="avatar" src="assets/img/profile-6.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-xl-flex d-block justify-content-between">
<div class="">
<h6 class="">Project Lead Pickup</h6>
<p class="">Mary McDonald</p>
</div>
<div>
<button class="btn btn-dark btn-sm">View</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div id='right-defaults' class='dragula'>
<div class="media d-md-flex d-block text-sm-left text-center">
<img alt="avatar" src="assets/img/profile-7.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-xl-flex d-block justify-content-between">
<div class="">
<h6 class="">Need to be approved</h6>
<p class="">Shaun Park</p>
</div>
<div>
<button class="btn btn-dark btn-sm">View</button>
</div>
</div>
</div>
</div>
<div class="media d-md-flex d-block text-sm-left text-center">
<img alt="avatar" src="assets/img/profile-8.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-xl-flex d-block justify-content-between">
<div class="">
<h6 class="">Meeting with client</h6>
<p class="">Roxanne</p>
</div>
<div>
<button class="btn btn-dark btn-sm">View</button>
</div>
</div>
</div>
</div>
<div class="media d-md-flex d-block text-sm-left text-center">
<img alt="avatar" src="assets/img/profile-9.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-xl-flex d-block justify-content-between">
<div class="">
<h6 class="">Project Detail</h6>
<p class="">Lisa Doe</p>
</div>
<div>
<button class="btn btn-dark btn-sm">View</button>
</div>
</div>
</div>
</div>
<div class="media d-md-flex d-block text-sm-left text-center">
<img alt="avatar" src="assets/img/profile-10.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-xl-flex d-block justify-content-between">
<div class="">
<h6 class="">Edited Post Apporval</h6>
<p class="">Kristen Beck</p>
</div>
<div>
<button class="btn btn-dark btn-sm">View</button>
</div>
</div>
</div>
</div>
<div class="media d-md-flex d-block text-sm-left text-center">
<img alt="avatar" src="assets/img/profile-11.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-xl-flex d-block justify-content-between">
<div class="">
<h6 class="">Project Lead Pickup</h6>
<p class="">Alma Clarke</p>
</div>
<div>
<button class="btn btn-dark btn-sm">View</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-section-container show-code">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
dragula([$('left-defaults'), $('right-defaults')])
.on('drag', function (el) {
console.log(el);
el.className += ' el-drag-ex-1';
}).on('drop', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-1', '');
}).on('cancel', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-1', '');
});
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Icon Change</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class='parent ex-2'>
<div class='row'>
<div class="col-md-6">
<div id='left-events' class='dragula'>
<div class="media d-block d-sm-flex">
<img alt="avatar" src="assets/img/profile-16.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-flex justify-content-between">
<div class="">
<h6 class="">Lisa Doe</h6>
<p class="">New post is written by Andy.</p>
</div>
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star f-icon-line" style="display:block"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<i class="f-icon-fill flaticon-star-fill-1" style="display: none"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart f-icon-fill"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
</div>
</div>
</div>
<div class="media d-block d-sm-flex">
<img alt="avatar" src="assets/img/drag-4.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-flex justify-content-between">
<div class="">
<h6 class="">Shaun Park</h6>
<p class="">New project meeting.</p>
</div>
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star f-icon-line" style="display:block"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<i class="f-icon-fill flaticon-star-fill-1" style="display: none"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart f-icon-fill" style="display: none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
</div>
</div>
</div>
<div class="media d-block d-sm-flex">
<img alt="avatar" src="assets/img/profile-26.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-flex justify-content-between">
<div class="">
<h6 class="">Andy King</h6>
<p class="">Get new project details from Shaun</p>
</div>
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star f-icon-line" style="display:block"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<i class="f-icon-fill flaticon-star-fill-1" style="display: none"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart f-icon-fill" style="display: none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
</div>
</div>
</div>
<div class="media d-block d-sm-flex">
<img alt="avatar" src="assets/img/g-7.png" class="img-fluid ">
<div class="media-body">
<div class="d-flex justify-content-between">
<div class="">
<h6 class="">Judy Holmes</h6>
<p class="">A post is edited by Mary.</p>
</div>
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star f-icon-line" style="display:block"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<i class="f-icon-fill flaticon-star-fill-1" style="display: none"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart f-icon-fill" style="display: none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
</div>
</div>
</div>
<div class="media d-block d-sm-flex">
<img alt="avatar" src="assets/img/drag-2.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-flex justify-content-between">
<div class="">
<h6 class="">Alma Clarke</h6>
<p class="">Pick up Lisa Doe from the airport.</p>
</div>
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star f-icon-line" style="display:block"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<i class="f-icon-fill flaticon-star-fill-1" style="display: none"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart f-icon-fill" style="display: none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div id='right-events' class='dragula'>
<div class="media d-block d-sm-flex">
<img alt="avatar" src="assets/img/p7.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-flex justify-content-between">
<div class="">
<h6 class="">John Doe</h6>
<p class="">New post is written by Andy.</p>
</div>
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star f-icon-line" style="display:none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<i class="f-icon-fill flaticon-star-fill-1" style="display: block"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart f-icon-fill" style="display: none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
</div>
</div>
</div>
<div class="media d-block d-sm-flex">
<img alt="avatar" src="assets/img/drag-1.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-flex justify-content-between">
<div class="">
<h6 class="">Linda Nelson</h6>
<p class="">New project meeting.</p>
</div>
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star f-icon-line" style="display:none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<i class="f-icon-fill flaticon-star-fill-1" style="display: block"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart f-icon-fill" style="display: none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
</div>
</div>
</div>
<div class="media d-block d-sm-flex">
<img alt="avatar" src="assets/img/g-8.png" class="img-fluid ">
<div class="media-body">
<div class="d-flex justify-content-between">
<div class="">
<h6 class="">Angie Young</h6>
<p class="">Get new project details from Shaun</p>
</div>
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star f-icon-line" style="display:none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<i class="f-icon-fill flaticon-star-fill-1" style="display: block"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart f-icon-fill" style="display: none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
</div>
</div>
</div>
<div class="media d-block d-sm-flex">
<img alt="avatar" src="assets/img/p9.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-flex justify-content-between">
<div class="">
<h6 class="">Amy Diaz</h6>
<p class="">A post is edited by Mary.</p>
</div>
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star f-icon-line" style="display:none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<i class="f-icon-fill flaticon-star-fill-1" style="display: block"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart f-icon-fill" style="display: none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
</div>
</div>
</div>
<div class="media d-block d-sm-flex">
<img alt="avatar" src="assets/img/p6.jpeg.jpg" class="img-fluid ">
<div class="media-body">
<div class="d-flex justify-content-between">
<div class="">
<h6 class="">Lila Perry</h6>
<p class="">Pick up Lisa Doe from the airport.</p>
</div>
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star f-icon-line" style="display:none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<i class="f-icon-fill flaticon-star-fill-1" style="display: block"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart f-icon-fill" style="display: none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
dragula([document.getElementById("left-events"), document.getElementById("right-events")])
.on('drag', function (el) {
console.log(el);
el.className += ' el-drag-ex-2';
el.className = el.className.replace('ex-moved', '');
})
.on('drop', function (el, target, source, sibling) {
console.log(el);
el.className = el.className.replace('el-drag-ex-2', '');
el.className += ' ex-moved';
})
.on('over', function (el, container) {
container.className += ' ex-over';
})
.on('out', function (el, container) {
container.className = container.className.replace('ex-over', '');
})
.on('cancel', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-2', '');
});
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Delete User</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class='parent ex-3'>
<div class='row'>
<div class="col-md-6">
<div id='left-rm-spill' class='dragula'>
<div class="media d-block d-sm-flex text-sm-left text-center">
<img class="" src="assets/img/delete-user-15.jpeg.jpg" alt="avatar">
<div class="media-body">
<h5 class=""><span class="usr-commented">Alma Clarke</span> commented on Irene Collins's <span class="comment-topic">Status</span></h5>
<p class="meta-time">18 min ago</p>
</div>
</div>
<div class="media d-block d-sm-flex text-sm-left text-center">
<img class="" src="assets/img/delete-user-4.jpeg.jpg" alt="avatar">
<div class="media-body">
<h5 class=""><span class="usr-commented">Susan Phillips</span> commented on Vincent Carpenter's <span class="comment-topic">Status</span></h5>
<p class="meta-time">18 min ago</p>
</div>
</div>
<div class="media d-block d-sm-flex text-sm-left text-center">
<img class="" src="assets/img/delete-user-11.jpeg.jpg" alt="avatar">
<div class="media-body">
<h5 class=""><span class="usr-commented">Linda Nelson</span> commented on James Taylor's <span class="comment-topic">Status</span></h5>
<p class="meta-time">18 min ago</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div id='right-rm-spill' class='dragula'>
<div class="media d-block d-sm-flex text-sm-left text-center">
<img class="" src="assets/img/delete-user-12.jpeg.jpg" alt="avatar">
<div class="media-body">
<h5 class=""><span class="usr-commented">Grace Roberts</span> commented on Amy Diaz's <span class="comment-topic">Status</span></h5>
<p class="meta-time">18 min ago</p>
</div>
</div>
<div class="media d-block d-sm-flex text-sm-left text-center">
<img class="" src="assets/img/delete-user-16.jpeg.jpg" alt="avatar">
<div class="media-body">
<h5 class=""><span class="usr-commented">Mary Mcdonald</span> commented on Judy Holmes's <span class="comment-topic">Status</span></h5>
<p class="meta-time">18 min ago</p>
</div>
</div>
<div class="media d-block d-sm-flex text-sm-left text-center">
<img class="" src="assets/img/delete-user-17.jpeg.jpg" alt="avatar">
<div class="media-body">
<h5 class=""><span class="usr-commented">Oscar Garner</span> commented on Justin Cross's <span class="comment-topic">Status</span></h5>
<p class="meta-time">18 min ago</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
dragula([$('left-rm-spill'), $('right-rm-spill')], { removeOnSpill: true })
.on('drag', function (el) {
console.log(el);
el.className += ' el-drag-ex-3';
}).on('drop', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-3', '');
}).on('cancel', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-3', '');
});
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>News Feeds</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class='parent ex-4'>
<div class='row'>
<div class="col-md-6">
<div id='left-rollbacks' class='dragula'>
<div class="card post text-post" style="">
<div class="card-body">
<div class="media user-meta d-sm-flex d-block text-sm-left text-center">
<img class="" src="assets/img/dragp-1.jpeg.jpg" alt="avatar">
<div class="media-body">
<h5 class="">Linda Nelson</h5>
<p class="meta-time">11 hours ago</p>
</div>
</div>
<div class="post-content text-sm-left text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.</p>
</div>
<div class="row people-liked-post">
<div class="col-sm-5 text-sm-left text-center">
<ul class="list-inline people-liked-img">
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-6.jpeg.jpg" class="">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-7.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-8.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-10.jpeg.jpg">
</li>
</ul>
</div>
<div class="col-sm-7 text-sm-right text-center">
<div class="people-liked-post-name">
<span><a href="">Vincent, Mary</a> and 19 other like this</span>
</div>
</div>
</div>
</div>
</div>
<div class="card post text-post" style="">
<div class="card-body">
<div class="media user-meta media user-meta d-sm-flex d-block text-sm-left text-center">
<img class="" src="assets/img/dragp-7.jpeg.jpg" alt="avatar">
<div class="media-body">
<h5 class="">Irene Collins</h5>
<p class="meta-time">11 hours ago</p>
</div>
</div>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.</p>
</div>
<div class="row people-liked-post">
<div class="col-sm-5 text-sm-left text-center">
<ul class="list-inline people-liked-img">
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-6.jpeg.jpg" class="">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-7.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-8.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-10.jpeg.jpg">
</li>
</ul>
</div>
<div class="col-sm-7 text-sm-right text-center">
<div class="people-liked-post-name">
<span><a href="">Vincent, Mary</a> and 19 other like this</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div id='right-rollbacks' class='dragula'>
<div class="card post text-post" style="">
<div class="card-body">
<div class="media user-meta media user-meta d-sm-flex d-block text-sm-left text-center">
<img class="" src="assets/img/dragp-4.jpeg.jpg" alt="avatar">
<div class="media-body">
<h5 class="">Dale Butler</h5>
<p class="meta-time">11 hours ago</p>
</div>
</div>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.</p>
</div>
<div class="row people-liked-post">
<div class="col-sm-5 text-sm-left text-center">
<ul class="list-inline people-liked-img">
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-6.jpeg.jpg" class="">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-7.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-8.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-10.jpeg.jpg">
</li>
</ul>
</div>
<div class="col-sm-7 text-sm-right text-center">
<div class="people-liked-post-name">
<span><a href="">Vincent, Mary</a> and 19 other like this</span>
</div>
</div>
</div>
</div>
</div>
<div class="card post text-post" style="">
<div class="card-body">
<div class="media user-meta media user-meta d-sm-flex d-block text-sm-left text-center">
<img class="" src="assets/img/dragp-6.jpeg.jpg" alt="avatar">
<div class="media-body">
<h5 class="">Iris Hubbard</h5>
<p class="meta-time">11 hours ago</p>
</div>
</div>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.</p>
</div>
<div class="row people-liked-post">
<div class="col-sm-5 text-sm-left text-center">
<ul class="list-inline people-liked-img">
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-6.jpeg.jpg" class="">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-7.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-8.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-10.jpeg.jpg">
</li>
</ul>
</div>
<div class="col-sm-7 text-sm-right text-center">
<div class="people-liked-post-name">
<span><a href="">Vincent, Mary</a> and 19 other like this</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
dragula([$('left-rollbacks'), $('right-rollbacks')], { revertOnSpill: true })
.on('drag', function (el) {
console.log(el);
el.className += ' el-drag-ex-4';
}).on('drop', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-4', '');
}).on('cancel', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-4', '');
});
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Drag Handler</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area">
<div class='parent ex-5'>
<div class='row'>
<div class="col-md-6">
<div id='left-lovehandles' class='dragula'>
<div class="media d-block d-xl-flex">
<ul class="list-inline people-liked-img text-center text-sm-left">
<li class="list-inline-item badge-notify mr-0">
<div class="notification">
<span class="badge badge-primary">5</span>
</div>
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-6.jpeg.jpg" class="">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-7.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-8.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-10.jpeg.jpg">
</li>
</ul>
<div class="media-body">
<div class="d-sm-flex d-block justify-content-between text-sm-left text-center">
<div class="">
<h5 class="">Engineering & Security</h5>
</div>
<div>
<span class="handle">+</span>
</div>
</div>
</div>
</div>
<div class="media d-block d-xl-flex">
<ul class="list-inline people-liked-img text-center text-sm-left">
<li class="list-inline-item badge-notify mr-0">
<div class="notification">
<span class="badge badge-secondary">5</span>
</div>
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-6.jpeg.jpg" class="">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-7.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-8.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-10.jpeg.jpg">
</li>
</ul>
<div class="media-body">
<div class="d-sm-flex d-block justify-content-between text-sm-left text-center">
<div class="">
<h5 class="">Front Office</h5>
</div>
<div>
<span class="handle">+</span>
</div>
</div>
</div>
</div>
<div class="media d-block d-xl-flex">
<ul class="list-inline people-liked-img text-center text-sm-left">
<li class="list-inline-item badge-notify mr-0">
<div class="notification">
<span class="badge badge-success">2</span>
</div>
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-6.jpeg.jpg" class="">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-7.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-8.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-10.jpeg.jpg">
</li>
</ul>
<div class="media-body">
<div class="d-sm-flex d-block justify-content-between text-sm-left text-center">
<div class="">
<h5 class="">Logistics</h5>
</div>
<div>
<span class="handle">+</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div id='right-lovehandles' class='dragula'>
<div class="media d-block d-xl-flex">
<ul class="list-inline people-liked-img text-center text-sm-left">
<li class="list-inline-item badge-notify mr-0">
<div class="notification">
<span class="badge badge-info">5</span>
</div>
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-6.jpeg.jpg" class="">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-7.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-8.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-10.jpeg.jpg">
</li>
</ul>
<div class="media-body">
<div class="d-sm-flex d-block justify-content-between text-sm-left text-center">
<div class="">
<h5 class="">Marketing & Sales</h5>
</div>
<div>
<span class="handle">+</span>
</div>
</div>
</div>
</div>
<div class="media d-block d-xl-flex">
<ul class="list-inline people-liked-img text-center text-sm-left">
<li class="list-inline-item badge-notify mr-0">
<div class="notification">
<span class="badge badge-danger">9</span>
</div>
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-6.jpeg.jpg" class="">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-7.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-8.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-10.jpeg.jpg">
</li>
</ul>
<div class="media-body">
<div class="d-sm-flex d-block justify-content-between text-sm-left text-center">
<div class="">
<h5 class="">Admin</h5>
</div>
<div>
<span class="handle">+</span>
</div>
</div>
</div>
</div>
<div class="media d-block d-xl-flex">
<ul class="list-inline people-liked-img text-center text-sm-left">
<li class="list-inline-item badge-notify mr-0">
<div class="notification">
<span class="badge badge-primary">8</span>
</div>
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-6.jpeg.jpg" class="">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-7.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-8.jpeg.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-10.jpeg.jpg">
</li>
</ul>
<div class="media-body">
<div class="d-sm-flex d-block justify-content-between text-sm-left text-center">
<div class="">
<h5 class="">HR</h5>
</div>
<div>
<span class="handle">+</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="code-section-container">
<button class="btn toggle-code-snippet"><span>Code</span></button>
<div class="code-section text-left">
<pre>
dragula([$('left-lovehandles'), $('right-lovehandles')], {
moves: function (el, container, handle) {
return el;
return handle.className === 'handle';
}
}).on('drag', function (el) {
console.log(el);
el.className += ' el-drag-ex-5';
}).on('drop', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-5', '');
}).on('cancel', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-5', '');
})
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-wrapper">
<div class="footer-section f-section-1">
<p class="">Copyright © 2020 <a target="_blank" href="../../../designreset.html">DesignReset</a>, All rights <a href="http://www.bootstrapmb.com">Reserved </a>.</p>
</div>
<div class="footer-section f-section-2">
<p class="">Coded with <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></p>
</div>
</div>
</div>
<!-- END CONTENT AREA -->
</div>
<!-- END MAIN CONTAINER -->
<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
<script src="assets/js/libs/jquery-3.1.1.min.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/js/app.js"></script>
<script>
$(document).ready(function() {
App.init();
});
</script>
<script src="plugins/highlight/highlight.pack.js"></script>
<script src="assets/js/custom.js"></script>
<!-- END GLOBAL MANDATORY SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="plugins/drag-and-drop/dragula/dragula.min.js"></script>
<script src="plugins/drag-and-drop/dragula/custom-dragula.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
</body>
</html>
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化