Drag and Drop Div Elements

August 9, 2015 admin Uncategorized 0

Using Jquery we can drag and drop div elements:

1) we have two div “test1” “test2”

<div id="test1">

<div class ="monday"></div>

<div class ="tuesday"></div>

<div class ="wednesday"></div>

<div class="saturday"></div>

<div class"sunday"></div>

</div>

<div id="test2">

<div class ="thursday"></div>

<div class ="friday"></div>

</div>

2) We want to drag div “monday”,”tuesday” and “wednesday” from test1 and drop into test2.

<div id="test1">

  <div class="saturday"></div>

  <div class"sunday"></div>

</div>

<div id="test2">

  <div class ="monday"></div>

  <div class ="tuesday"></div>

  <div class ="wednesday"></div>

  <div class ="thursday"></div>

  <div class ="friday"></div>

</div>

3) “$(”).detach().prependTo(‘ ‘);” – jquery method allows to drag and drop elements.

4) Put this code into “head” tag

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript">

var product_features = ['draggable','trackable','colorable'];

//array elemnt 3

var id1 = product_features[2];

//array element 2

var id2 = product_features[1];
//array elemnt 1

var id3 = product_features[0];

alert('#input .' +id1);

$(document).ready(function() {
  
  $('#input .'+id1).detach().prependTo('#output');
  
  $('#input .'+id2).detach().prependTo('#output');
  
  $('#input .'+id3).detach().prependTo('#output');

});

</script>

5) Below is the full code to use

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Mindspark JavaScript Test</title>
    
    <script src="http://code.jquery.com/jquery-latest.min.js"        type="text/javascript"></script>

    <script type="text/javascript">
      var product_features=['draggable','trackable','colorable'];

      //array element 3
    
      var id1 = product_features[2];

      //array element 2

      var id2 = product_features[1];

     //array elemnt 1

    var id3 = product_features[0];

    alert('#input .' +id1);

   $(document).ready(function() {
  
    $('#input .'+id1).detach().prependTo('#output');
  
    $('#input .'+id2).detach().prependTo('#output');
  
    $('#input .'+id3).detach().prependTo('#output');

  });

</script>
</head>
<body> 
  <pre> INSTRUCTIONS Using Javascript, move the divs below that contain the class name strings defined in the array "product_features" from the "input" div to the "output" div.   Feel free to use any 3rd party Javascript library with an absolute URL. The page needs to run by itself and produce the expected output. Edit the source of this page and email it back when finished. The expected result should be: Input Resize Download Output Drag 1 Drag 2 Track Color </pre> 
  <h3>Input</h3> 
  <div id="input"> 
    <div>Drag 1</div> 
    <div>Resize</div> 
    <div>Download</div> 
    <div>Drag 2</div> 
    <div>Track</div> 
    <div>Color</div> 
  </div> 
  <h3>Output</h3> 
  <div id="output"></div> 
</body>
</html>