I am trying to create/make my first drag/drop/select image upload.
I have a backend to a site where I am trying to add a "car" and see the form below. I am trying to figure out, do I need to handle the images outside the form or what is the best way to get around it?
Ideally I would like to allow the user to drag/select images after the "supporting text" area in a drag/drop box.
Upload Page is Here
I suppose what I am asking, as I believe this is generally handled by jquery, what is the best way to handle it. Ideally when I hit the create button I would like to send it all off to another php page to be submitted into the database and the path for the images store but I know I need to "upload the images" before I move to the next page?
See this example. It might help you.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<!-- FORM START -->
<form class="form-horizontal">
<fieldset>
<div class="col-md-6">
<h3> Preexisting Fields </h3>
<hr/>
<!-- First Name -->
<div id="firstnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
<label class="col-md-3 control-label" for="textinput">First Name</label>
<div class="col-md-9" >
<input id="textinput" name="textinput" type="text" placeholder="John" class="form-control pull-right">
</div>
</div>
<!-- Last Name -->
<div id="lastnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
<label class="col-md-3 control-label" for="textinput">Last Name</label>
<div class="col-md-9" >
<input id="textinput" name="textinput" type="text" placeholder="Doe" class="form-control input-md">
</div>
</div>
</div>
</fieldset>
</form>
<!-- INSERT HERE: i want to be able to drag those items above into the panel and create a new form -->
<div id="builder" class="panel panel-default">
<h3> Drag Fields </h3> <hr/>
<div class="panel-body" ondrop="drop(event)" ondragover="allowDrop(event)">
<form id="target" class="form-horizontal">
<fieldset >
</fieldset>
</form>
</div>
</div>
Related
This question already has answers here:
When to use single quotes, double quotes, and backticks in MySQL
(13 answers)
What to do with mysqli problems? Errors like mysqli_fetch_array(): Argument #1 must be of type mysqli_result and such
(1 answer)
How do I get PHP errors to display?
(27 answers)
Closed 1 year ago.
below in the image i am getting only the 3 form elements but there are more .I am unable to find the error where it is occuring .please help me to get the solution.
It is a basic html form there are like 10 form elements but when i connected it with the database and ran the code only the first 3 form elements are getting displayed.
It is basically connected to mysql data base in the backend and is a blog websites admin panel.
<?php
require "<includes/dbh.php";
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Free Bootstrap Admin Template : Dream</title>
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="wrapper">
<?php include "header.php"; include "sidebar.php" ?>
<div id="page-wrapper" >
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h1 class="page-header">
Write a Blog on spot
</h1>
</div>
</div>
<!-- /. ROW -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Write a blog
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form role="form" method="POST" action="includes/add-blog.php" enctype="multipart/form-data">
<div class="form-group">
<label>Title</label>
<input class="form-control" name="blog-title">
</div>
<div class="form-group">
<label>Meta Title</label>
<input class="form-control" name="blog-meta-title">
</div>
<div class="form-group">
<label>Blog category</label>
<select class="form-control" name="blog-category">
<?php
$sqlCategories="SELECT * FROM blog-category";
$queryCategories=mysqli_query($conn,$sqlCategories);
while($rowCategories=mysqli_fetch_assoc($queryCategories)){
$cId=$rowCategories['n_category_id'];
$cName=$rowCategories['v_category_title'];
echo "<option value='".$cId."'>".$cName."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label>Main image</label>
<input type="file" name="main-blog-image">
</div>
<div class="form-group">
<label>Alternate image</label>
<input type="file"name="alt-blog-image">
</div>
<div class="form-group">
<label>summary</label>
<textarea class="form-control" rows="3"name="blog-summary"></textarea>
</div>
<div class="form-group">
<label>Blog content</label>
<textarea class="form-control" rows="3" name="blog-content"></textarea>
</div>
<div class="form-group">
<label>Blog Tags seperated by commas</label>
<textarea class="form-control" rows="3" name="blog-tags"></textarea>
</div>
<div class="form-group input-group">
<label>Blog path</label>
<div class="input-group"> <span class="input-group-addon">www.sjg.com/</span>
<input type="text" class="form-control" placeholder="username" name="blog-path"></div>
</div>
<div class="form-group">
<label>Home Page Placement</label>
<label class="radio-inline">
<input type="radio" name="blog-home-page-placement" id="optionsRadiosInline1" value="option1" checked="">1
</label>
<label class="radio-inline">
<input type="radio" name="blog-home-page-placement" id="optionsRadiosInline2" value="option2">2
</label>
<label class="radio-inline">
<input type="radio" name="blog-home-page-placement" id="optionsRadiosInline3" value="option3">3
</label>
</div>
<button type="submit" class="btn btn-default" name="submit-blog">Add Blog</button>
</form>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<?php include "footer.php"; ?>
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<!-- /. WRAPPER -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Custom Js -->
<script src="assets/js/custom-scripts.js"></script>
</body>
</html>
Above in the image i am getting only the 3 form elements but there are more .I am unable to find the error where it is occuring .please help me to get the solution.
It is a basic html form there are like 10 form elements but when i connected it with the database and ran the code only the first 3 form elements are getting displayed.
It is basically connected to mysql data base in the backend and is a blog websites admin panel.
Judging by where the page stops rendering, there's likely an error where your category dropdown is being populated. To check this you could add <?php error_reporting(E_ALL); ?> to the top of your file. Check the error_reporting docs here.
I'd also like to second #CBroe's observation that require "<includes/dbh.php"; doesn't look correct. Properly including that file may allow the category generation to occur and allow for the rest of the document to populate.
I'd also like to add that echo "<option value='".$cId."'>".$cName."</option>"; could be written as echo "<option value='{$cId}'>{$cName}</option>"; to help with human readability, if you so desired.
I am using the bootstrap version 4. Index.php includes the below contact form. I want users to see the validation messages when they click submit to draw their attention to the required fields they have missed. For example, when a user hits submit without filling any field, the user sees the below, which is the behavior I want to achieve, and I currently have:
[please note that to save space in this post, all images can be shown by clicking on run code snippet]
<img src="https://i.stack.imgur.com/h1KwJ.png" width="50%" height="50%" />
The contact form: Index.php
<!DOCTYPE HTML>
<html>
<head>
<title>Contact form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div class ="container">
<div class="col-lg-6 push-lg-3">
<h1> Contact us</h1>
<p>Fill out the below form to contact us</p>
<form id="contactForm" class="contact-form needs-validation" action="form.php" method="POST" novalidate>
<div class="contact-form-success alert alert-success d-none mt-4" id="contactSuccess">
<strong>Success!</strong> Your message has been sent to us.
</div>
<div class="contact-form-error alert alert-danger d-none mt-4" id="contactError">
<strong>Error!</strong> There was an error sending your message.
<span class="mail-error-message text-1 d-block" id="mailErrorMessage"></span>
</div>
<div class="form-row">
<div class="form-group col-lg-6">
<label for="name" class="required font-weight-bold text-dark">Full Name</label>
<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" required>
</div>
<div class="form-group col-lg-6">
<label class="required font-weight-bold text-dark">Email Address</label>
<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" required>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label class="font-weight-bold text-dark">Phone</label>
<input type="text" value="" data-msg-required="Please enter the phone number." maxlength="100" class="form-control" name="phone" id="phone" required>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label class="required font-weight-bold text-dark">Message</label>
<textarea maxlength="5000" data-msg-required="Please enter your message." rows="5" class="form-control" name="message" id="message" required></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<div class="g-recaptcha" data-sitekey="Your_Public_Key"></div>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<input type="submit" value="Send Message" class="btn btn-primary btn-modern" data-loading-text="Loading...">
</div>
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/view.contact.js"></script>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
else {
$("#submit-btn .text").text("Enviado");
$("#submit-btn").addClass("active");
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
<script>
$("#contactForm").validate();
</script>
</body>
</html>
The issue
I have the issue that when the user hits submits, everything goes as planned, and the form refreshes, and the success message appears, but the form refreshes with validation showing red boxes, which is the problem I want to solve. This is how a successful form submission currently looks like and this is incorrect:
<img src="https://i.stack.imgur.com/eV7A6.png" width="50%" height="50%" />
When the user hits submit, I want the user to see the success message; I want the form to refresh without green or red boxes to the input fields. To better understand this, please have a look at the below behavior I want to achieve:
<img src="https://i.stack.imgur.com/0Yf01.png" width="50%" height="50%" />
I know that the issue is in the JavaScript for disabling form submissions (above) or in the view.contact.js:
I appreciate any insights or guidance about how I can fix this.
One more question I have is this: Will I need the below code?
<script>
$("#contactForm").validate();
</script>
Any comment on how to make this code better is highly appreciated.
From the official documentacion:
To reset the appearance of the form (for instance, in the case of
dynamic form submissions using AJAX), remove the .was-validated class
from the again after submission.
Bootstrap > Form > Validation > How it Works
In your case, you need to add the following line:
$form.removeClass('was-validated');
Inside:
$.ajax({...})
.done(function() {
//HERE
),
.always({...});
how can I access the value of an input text field, which loads propably after the dom?
I am working with leaflet at the moment and a plugin creats an input field and I don't know, how to access it.
If I try this:
$('#myTextbox1').on('input', function() {
alert($('#myTextbox1').val());
});
I don't get any result. I guess, jQuery can't handle the created input field.
My HTML looks like this:
#extends('layouts.app')
#section('head')
<link rel="stylesheet" type="text/css" href="{{ asset('css/leaflet/leaflet.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/leaflet/leaflet-search.css') }}">
#ensection
#section('content')
<div class="col-md-8 col-md-offset-2 form-container">
<div id="map-adress"></div>
<div class="panel panel-default marker-panel">
<div class="panel-heading">Create a post</div>
<div class="panel-body">
<div class="col-md-8 col-md-offset-4">
<p>Insert the adress of the marker position<br>
(You can move the marker on the map to the right position).</p>
</div>
<div class="form-group">
<label for="findbox-adress" class="col-md-4 control-label find-label">Marker Location</label>
<div class="col-md-6">
<div id="findbox-adress"></div>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary user_marker_btn">
Validate
</button>
</div>
</div>
</div>
</div>
<div id="user_marker_adress" class="panel panel-default">
<div class="panel-heading">Validate the marker adress</div>
<div class="panel-body">
<form class="form-horizontal" method="POST" action="{{ route('userposts.create') }}">
{{ csrf_field() }}
<div class="form-group">
<label for="a_street" class="col-md-4 control-label">Street</label>
<div class="col-md-6">
<input id="a_street" type="text" class="form-control" name="a_street" required>
</div>
</div>
<div class="form-group">
<label for="a_street_no" class="col-md-4 control-label">Street No.</label>
<div class="col-md-6">
<input id="a_street_no" type="text" class="form-control" name="a_street_no" required>
</div>
</div>
<div class="form-group">
<label for="a_zip_code" class="col-md-4 control-label">Zip Code</label>
<div class="col-md-6">
<input id="a_zip_code" type="text" class="form-control" name="a_zip_code" required>
</div>
</div>
<div class="form-group">
<label for="a_state" class="col-md-4 control-label">State</label>
<div class="col-md-6">
<input id="a_state" type="text" class="form-control" name="a_state" required>
</div>
</div>
<div class="form-group">
<label for="a_country" class="col-md-4 control-label">Country</label>
<div class="col-md-6">
<input id="a_country" type="text" class="form-control" name="a_country" required>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="reset" class="btn btn-danger">
Clear
</button>
<button type="submit" class="btn btn-primary">
Next
</button>
</div>
</div>
</form>
</div>
</div>
#endsection
#section('scripts')
<script type="text/javascript" src="{{ asset('js/leafleat/leaflet.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/leafleat/leaflet-search.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/leafleat/marker-adress.js') }}"></script>
#endsection
The div with the ID "findbox-adress" triggers the plugin, which will create the form with the input, that I can't access.
Hope, someone got an idear of my problem...
Edit:
OK, I have found an ID in this element and with the ID it is working, but only the text, that I have typed in. The plugin gives me a dropdown selection(autocomplete like ajax) where I can choose a unordered list with some li's. But there I can't get a value? How can I get the value, if someone is clicking on the autocomplete(li's)?
My try:
$(".user_marker_btn").click(function(){
console.log($("#searchtext9").val());
});
On dynamically created elements, use event delegation to attach event listeners.
Attach the event listener to a parent element that existed on DOM-load, and then pass the element that you wish to delegate the event to:
$('body').on('input', '#myTextbox1', function() {
alert($('#myTextbox1').val());
});
First of all, your given code doesn't look right. Please refer to jQuery manual: http://api.jquery.com/on/
This might be:
$( "body" ).on( "click", "input#myTextbox1" function() {
console.log( $( this ).val() );
});
As you said, "The div with the ID "findbox-adress" triggers the plugin, which will create the form with the input"
If you can track the event when the div 'findbox-adress' get clicked or triggered, you can easily check for the form whether it has been added in the DOM or not and then check for input field by using $("input#myTextbox1").val();
Or if you cannot track the event of loading the form, you will need to have a function to check always when the form is getting loaded into the DOM. That might be using setTimeout() or any other method by framework/library. And finally stop the tracking when the form loaded.
I am using a form to upload a photo and show in the <img>.
But it doesn't work correctly and can't show the photo on <img>.
I am using Django and I have a base.html as a template and I added this javascript to the head by:
<script src="{% static "landingpages/js/photoupload.js" %}"></script>
and also the from is being generate by user as much as they needs
Javascript
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#myimg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(function () { //document ready call
$("#photoinput").change(function(){
readURL(this);
});
});
HTML
<section class="container" xmlns="http://www.w3.org/1999/html">
<div class="row addform" id="addform">
<div class="col-md-12 addform-col">
<div id="headertag" class="row" style="margin-left: 0px">
<label class="add-lable">Team Member(s):
<span style="color:red">*</span>
</label>
</div>
<div class="row input-field">
<form id="form1" runat="server">
<div name="membercard" class="row">
<div id="teamform" class="col-md-4" style="display: none">
<div name="imageholder" class="row tm-image-holder">
<div class="col-md-12" style="text-align: center">
<img id="myimg" style="height: 200px;text-align: center;">
</div>
</div>
<input id="photoinput" type="file" class="btn btn-block btn-lg btn-primary inout-margin mybut">
<input id="name" name="name0" type="text" class="add-input input-margin" placeholder="Name, Mohammad, ... *">
<input id="job" name="job0" type="text" class="add-input" placeholder="Job, Developer, Designer, ... *">
<textarea id="explain" name="explain0" class="add-textarea input-margin" rows="4" placeholder="Explain this member in 2 to 4 lines *"></textarea>
</div>
<span id="formhere"></span>
</div>
</form>
<div name="addform" class="row input-field">
<div class="col-md-12" style="text-align: left">
<a onclick="member_card()">+ Add Team Member</a>
</div>
</div>
</div>
</div>
</div>
</section>
Add the option enctype="multipart/form-data" to your form element, like this:
<form id="form1" enctype="multipart/form-data runat="server">
As the Django Documentation says:
Note that request.FILES will only contain data if the request method was POST and the that posted the request has the attribute enctype="multipart/form-data". Otherwise, request.FILES will be empty.
https://docs.djangoproject.com/en/1.9/topics/http/file-uploads/
I'm trying to make a customizable form builder where you can drag and drop the Bootstrap fields into a box in order to make another form. I'm fairly new to html/css/js so anything would be greatly appreciated!
Here's what I have so far:
<!-- FORM START -->
<form class="form-horizontal">
<fieldset>
<div class="col-md-6">
<h3> Preexisting Fields </h3>
<hr/>
<!-- First Name -->
<div id="firstnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
<label class="col-md-3 control-label" for="textinput">First Name</label>
<div class="col-md-9" >
<input id="textinput" name="textinput" type="text" placeholder="John"
class="form-control pull-right">
</div>
</div>
<!-- Last Name -->
<div id="lastnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
<label class="col-md-3 control-label" for="textinput">Last Name</label>
<div class="col-md-9" >
<input id="textinput" name="textinput" type="text" placeholder="Doe"
class="form-control input-md">
</div>
</div>
</div>
</fieldset>
</form>
<!-- INSERT HERE: I want to be able to drag those items above
into the panel and create a new form -->
<div id="builder" class="panel panel-default">
<h3> Drag Fields </h3> <hr/>
<div class="panel-body" ondrop="drop(event)" ondragover="allowDrop(event)">
<form id="target" class="form-horizontal">
<fieldset >
</fieldset>
</form>
</div>
</div>
JavaScript:
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
This appears to be working with some success (see this fiddle or the snippet below)
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<!-- FORM START -->
<form class="form-horizontal">
<fieldset>
<div class="col-md-6">
<h3> Preexisting Fields </h3>
<hr/>
<!-- First Name -->
<div id="firstnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
<label class="col-md-3 control-label" for="textinput">First Name</label>
<div class="col-md-9" >
<input id="textinput" name="textinput" type="text" placeholder="John" class="form-control pull-right">
</div>
</div>
<!-- Last Name -->
<div id="lastnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
<label class="col-md-3 control-label" for="textinput">Last Name</label>
<div class="col-md-9" >
<input id="textinput" name="textinput" type="text" placeholder="Doe" class="form-control input-md">
</div>
</div>
</div>
</fieldset>
</form>
<!-- INSERT HERE: i want to be able to drag those items above into the panel and create a new form -->
<div id="builder" class="panel panel-default">
<h3> Drag Fields </h3> <hr/>
<div class="panel-body" ondrop="drop(event)" ondragover="allowDrop(event)">
<form id="target" class="form-horizontal">
<fieldset >
</fieldset>
</form>
</div>
</div>
Can you describe more about the problem you're having? What you're expecting to see vs. what's actually happening?
Note: I'd also echo D Jones's comment that there's a huge amount of work here to build The General Case. The urge toward avoiding repetition is a good one, but copy and pasting will help get a handle on some of the common html patterns and idioms in Bootstrap long before you see the time saving benefits of creating an engine to do it for you.
That said, if you do want to explore it as a learning project, I'd take a look at more of the documentation on jQuery UI as that's doing a lot of the heavy lifting here (the Bootstrap html is just an implementation detail):
draggable
droppable
sortable