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

Simple Sign up design. Android.

Image
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     app:layout_behavior="@string/appbar_scrolling_view_behavior"     tools:context=".Signup"     tools:showIn="@layout/activity_signup">     <ScrollView         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:fillViewport="true"         tools:ignore="MissingConstraints">     <LinearLayout         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:orientation="vertic
Read more

Cart page design in android.

Image
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     app:layout_behavior="@string/appbar_scrolling_view_behavior"     tools:context=".Cart"     tools:showIn="@layout/activity_cart">     <LinearLayout         android:id="@+id/activity_cart_list"         xmlns:android="http://schemas.android.com/apk/res/android"         xmlns:tools="http://schemas.android.com/tools"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:orientation="vertical"         android:weightSu
Read more

Set Date on jDateChooser and retrieve record from database.

 d5  = ((JTextField)jDateChooser1.getDateEditor().getUiComponent()).getText();         SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); Calendar c = Calendar.getInstance();         try {             c.setTime(sdf.parse(d5));         } catch (ParseException ex) {             Logger.getLogger(Commity.class.getName()).log(Level.SEVERE, null, ex);         } c.add(Calendar.MONTH, 1);  // number of days to add d5 = sdf.format(c.getTime()); System.out.println(""+d5);         try {             java.util.Date date = new SimpleDateFormat("yyyy-MM-d").parse(String.valueOf(d5));             jDateChooser1.setDate(date);                    } catch (ParseException ex) {             Logger.getLogger(Commity.class.getName()).log(Level.SEVERE, null, ex);         }         try         {     Class.forName("com.mysql.jdbc.Driver");     java.sql.Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3305/commity",
Read more