Create Div and drag through jquery.

<html>
<head>
 
    <meta charset="utf-8">
 
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #F0F0F0;
        }
body {
font-family: Arial, Helvetica, sans-serif;
}

table {
font-size: 1em;
}

.ui-draggable, .ui-droppable {
background-position: top;
}
    </style>
<link rel="stylesheet" type="text/css" href="../css/normalize.css" />
<link rel="stylesheet" type="text/css" href="../fonts/font-awesome-4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="../css/demo.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.container123 {
  //position: relative;
  margin-top: 0px;
 // width: 500px;
  height: 100px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.container123:hover .overlay {
  display: block;
  background: rgba(0, 0, 0, .3);
}

.img123 {
  position: absolute;
  width: 500px;
  height: 300px;
  left: 0;
}

.title {
  position: absolute;
  width: 500px;
  left: 0;
  top: 120px;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  color: white;
  z-index: 1;
  transition: top .5s ease;
}

.container123:hover .title {
  top: 90px;
}

.button {
  position: absolute;
  width: 500px;
  left:0;
  top: 50px;
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
}

.button a {
  width: 200px;
  padding: 12px 48px;
  text-align: center;
  color: white;
  border: solid 2px white;
  z-index: 1;
}

.container123:hover .button {
  opacity: 1;
}
.imgload{
position: absolute;
  top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px !important;
    direction: ltr;
    cursor: pointer;color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
</style>
<script>
var count = 0;
function myFunction() {
count++;
 //$('#conatiner').append('<div class="container123" id="'+count+' draggable"><img id="theImg" class="img123" height="200px" width="200px" src="testImage.jpg" /><p class="title"></p><div class="button"><a href="#" onclick="refresh()"> REMOVE </a></div></div>');
 $('<div class="container123" id="'+count+' dragg"><img id="theImg" class="img123" height="200px" width="200px" src="testImage.jpg" /><p class="title"></p><div class="button"><a href="#" onclick="refresh()"> REMOVE </a></div></div>').draggable().appendTo($('#conatiner'));
}
 $( function() {
    $( "#draggable" ).draggable();
  } );
</script>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>

  </script>
</head>
<body>
<div id="container" class="ui-widget-content">
<button id="block" onclick="myFunction()">Block</button>
<button id="section">Section</button>
</div>
<div id="conatiner">
</div>

</body>
</html>

Popular posts from this blog

Jtable with database manually in netbeans.

package Demo; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement; import java.util.Vector; import javax.swing.JOptionPane; import javax.swing.table.DefaultTableModel; import net.proteanit.sql.DbUtils; /**  *  * @author NAVJYOTI  */ public class Jtablee extends javax.swing.JFrame {     /**      * Creates new form Jtablee      */     public Jtablee() {         initComponents();         set();     }     private int getsize() { int count=0; try {Class.forName("com.mysql.jdbc.Driver");             java.sql.Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3305/commity","root","root"); Statement stmt=con.createStatement(); String query="select * from group1"; ResultSet rs= ...
Read more

Join in Kotlin coroutines

  In Kotlin coroutines, the  join()  function is used to wait for the completion of multiple coroutines running concurrently. It allows you to ensure that all the launched coroutines finish their execution before proceeding further in the code. When you launch multiple coroutines using  launch ,  async , or other coroutine builders, you obtain references to these launched coroutines. You can store these references in variables and later use  join()  on each of these variables to wait for the corresponding coroutines to complete. import kotlinx.coroutines.* suspend fun doTaskA() { println(“Task A started”) delay(2000) // Simulate some asynchronous work for 2 seconds println(“Task A finished”) } suspend fun doTaskB() { println(“Task B started”) delay(3000) // Simulate some asynchronous work for 3 seconds println(“Task B finished”) } fun main() = runBlocking { val jobA = launch { doTaskA() } val jobB = launch { doTaskB() } println(“Launched both coroutine...
Read more