Drag a picture, append html that corresponds to the picture

Question

I'm new in jQuery and I would like to create a drag and drop HTML builder.

I have 2 divs: in the first I have pictures that represents HTML blocks in the other div I would like to have a sortable list with the divs that corresponds to the dropped picture.

I've tried a lot of things but It doesn't work. Here is one of multiple parts of code that I've tried :

<html>
<head>
    <meta charset="utf-8">
    <title>Drag and Drop tests</title>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>

<body>

    <style>
        #div_1{height:200px;width:400px;border:5px dotted red;}
        #div_2{height:200px;width:400px;background-color:yellow;}
        #left{
            width:400px;
            min-height:400px;
            max-height:;
            float:left;
            border:1px solid black;
            margin:0;padding:0;
        }
        #right{
            width:420px;
            float:right;
            border: 1px solid red;
            margin:0;
            padding:0;
        }
    </style>

    <script>
        $(function(){
            $(function(){
                $("#left").sortable({
                    revert: true
                });
            });
            $(function(){
                $(".my_div").draggable({
                    connectToSortable: "#left",
                    helper: "clone",
                    stop: function(e, ui){
                        $("#left").clone().append($(".bloc[data-id="+$(this).attr("data-id")+"]"));
                    }
                });
            });
            $("div").disableSelection();
        }); 
    </script>

    <div class="bloc" id="div_1" data_id="1"></div>
    <div class="bloc" id="div_2" data-id="2"></div>

    <div id="wrap" style="width:1000px;margin:auto"> 
        <div id="left">

        </div>

        <div id="right" >
            <table width="100%" style="text-align:center;height:100%">
            <tbody>
                <tr style="height:133px">
                    <td>
                        <div style="height:100%;width:100%;" class="my_div" data-type="content" data-id="1">
                            <img src="_pictures/1.png" alt="héhé" />
                        </div>
                    </td>
                    <td>
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="2">
                            <img src="_pictures/2.png" alt="héhé" />
                        </div>
                    </td>
                    <td>
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="3">
                            <img src="_pictures/3.png" alt="héhé" />
                        </div>
                    </td>
                </tr>

                <tr style="height:133px">
                    <td>
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="4">
                            <img src="_pictures/4.png" alt="héhé" />
                        </div>
                    </td>
                    <td>
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="5">
                            <img src="_pictures/5.png" alt="héhé" />
                        </div>
                    </td>
                    <td>
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="6">
                            <img src="_pictures/6.png" alt="héhé" />
                        </div>
                    </td>
                </tr>

                <tr style="height:133px">
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="7">
                            <img src="_pictures/7.png" alt="héhé" />
                        </div>
                    </td>
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="8">
                            <img src="_pictures/8.png" alt="héhé" />
                        </div>
                    </td>
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="9">
                            <img src="_pictures/9.png" alt="héhé" />
                        </div>
                    </td>
                </tr>

                <tr style="height:133px">
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="10">
                            <img src="_pictures/10.png" alt="héhé" />
                        </div>
                    </td>
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="11">
                            <img src="_pictures/11.png" alt="héhé" />
                        </div>
                    </td>
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="12">
                            <img src="_pictures/12.png" alt="héhé" />
                        </div>
                    </td>
                </tr>

                <tr style="height:133px">
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="13">
                            <img src="_pictures/13.png" alt="héhé" />
                        </div>
                    </td>
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="14">
                            <img src="_pictures/14.png" alt="héhé" />
                        </div>
                    </td>
                    <td class="my_td_parent">
                        <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="15">
                            <img src="_pictures/15.png" alt="héhé" />
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        </div>
    </div>
</body>

Or, if you prefer : https://jsfiddle.net/m2Lnzr1m/

Consider adding a jsfiddle (jsfiddle.net) to your question. That way it will be easier to help you. — entiendoNull, Jul 15 '16 at 14:13
You would accomplish this by merging two concepts that have already been developed. Sort lists via jQuery http://tinysort.sjeiti.com/#sorted-numbers + Connect lists via jQuery UI https://jqueryui.com/sortable/#connect-lists. If you can get a basic concept of a 2 row list working, then you can add more and fill the list content with images. — Alexander Dixon, Jul 15 '16 at 14:29

Alexander Dixon · Answer 1 · 2016-07-18T22:22:25.190

You would accomplish this by merging two concepts that have already been developed. Sort lists via jQuery tinysort + Connect lists via jQuery UI. If you can get a basic concept of a 2 row list working, then you can add more and fill the list content with images. I've updated the code to start out as <li> tags but then transform them to <div> tags. That way you can keep your code conceptually fluid (that is, you should be using lists) but use divs instead.

Fiddle Example

var origSort1 = $('#sortable1').html();
var origSort2 = $('#sortable2').html();

$('button#sort').on("click", function(e) {
  e.preventDefault();
  triggerSort();
});

//http://stackoverflow.com/a/8584217/5076162
(function($) {
  $.fn.changeElementType = function(newType) {
    this.each(function() {
      var attrs = {};

      $.each(this.attributes, function(idx, attr) {
        attrs[attr.nodeName] = attr.nodeValue;
      });

      $(this).replaceWith(function() {
        return $("<" + newType + "/>", attrs).append($(this).contents());
      });
    });
  };
})(jQuery);

$("ol").changeElementType("div");
$("li").changeElementType("div");

function triggerSort() {
  if ($('#sortable2 .li').length > 0) {
    tinysort('#sortable2>.li', {
      selector: 'img',
      attr: 'title'
    });
    numberItems();
    removeNumberedItems();
  } else {
    return false;
  }
}

$(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    placeholder: "ui-state-highlight"
  }).disableSelection();
});

$('#sortable2').on('mouseenter, mouseoutm mousemove', function() {
  numberItems();
});

$('#sortable1').on('mousemove', function() {
  removeNumberedItems();
});

function numberItems() {
  $('#sortable2').find($('.listNum')).each(function(i) {
    $(this).text(i + 1);
  });
}

function removeNumberedItems() {
  $('#sortable1').find($('.listNum')).each(function(i) {
    $(this).text("");
  });
}

img {
  width: 150px;
  clear: both;
  display: block;
}
#img02 {
  border: solid 3px #ACE;
}
#img01 {
  border: solid 2px #FF0;
}
button {
  clear: both;
  width: 404px;
  height: 20px;
  display: inline-block;
}
div#sortable1,
div#sortable2 {
  float: left;
  clear: none;
  padding-left: 25px;
  margin: 0;
}
div#sortable1 {
  float: left;
  clear: none;
  list-style-type: none;
}
div#sortable1,
div#sortable2 {
  min-height: 175px;
  max-width: 175px;
  min-width: 175px;
  border: solid 1px #000;
}
.ui-state-highlight {
  border: solid 1px #ACE;
  height: 45px;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.4/tinysort.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<ol id="sortable1" class="connectedSortable ol">
  <li class="ui-state-default li">Item <span class='listNum'></span>
    <img id="img01" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="1" />
  </li>
  <li class="ui-state-default li">Item <span class='listNum'></span>
    <img id="img02" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="2">
  </li>
</ol>

<ol id="sortable2" class="connectedSortable ol">

</ol>
<button id='sort'>Sort by Title Value</button>

$('button#sort').on("click", function(e) {
  e.preventDefault();
  triggerSort();
});

function triggerSort() {
  if ($('ol#sortable2 li').length > 0) {
    tinysort('ol#sortable2>li', {
      selector: 'img',
      attr: 'title'
    });
  } else {
    return false;
  }
}

$(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();
});

img {
  width: 150px;
  clear: both;
  display: block;
}

#img02 {
  border: solid 3px #ACE;
}

#img01 {
  border: solid 2px #FF0;
}

button {
  clear: both;
  width: 100%;
  height: 20px;
  display: inline-block;
}

ol#sortable1,
ol#sortable2 {
  float: left;
  clear: none;
  padding-left: 25px;
  margin: 0;
}

ol#sortable1 {
  float: left;
  clear: none;
  list-style-type: none;
}

ol#sortable1,
ol#sortable2 {
  min-height: 175px;
  max-width: 175px;
  min-width: 175px;
  border: solid 1px #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.4/tinysort.min.js"></script>
<ol id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1<img id="img01" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="1" /></li>
  <li class="ui-state-default">Item 2<img id="img02" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="2"></li>
</ol>

<ol id="sortable2" class="connectedSortable">

</ol>
<button id='sort'>Sort by Title Value</button>

Thank you:) I understand the concept and this is exactly what I'm trying to do but it's possible that this doesn't work very good if I work on divs and not on lists ? — Grechka Vassili, Jul 18 '16 at 08:30
@GrechkaVassili I've updated the code to transform the `li` to divs. Please have a look and let me know if it is what you were looking for. — Alexander Dixon, Jul 18 '16 at 21:15
Thank you, the function that converts li to divs is awesome :) — Grechka Vassili, Jul 19 '16 at 08:35
GrechkaVassili, Credit goes to @AndrewWhitaker http://stackoverflow.com/a/8584217/5076162. It can be used as for other HTML transformations as well. Are you all set with this task or are you still having issues? — Alexander Dixon, Jul 19 '16 at 13:23

Drag a picture, append html that corresponds to the picture

1 Answers1