HAPbuilder v2 (problem se sortable

by Petr Haluza

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="demo">

<div id="katalog-elementu">
  <div id="HeadingLeft" class="blok">Nadpis vlevo</div>		
  <div id="HeadingCenter" class="blok">Nadpis na střed</div>
  <div id="ProstyText" class="blok">Prostý text</div>	
</div>


<div id="staveniste"></div>

<!-- takto by vypadal obsah načtený z uloženého stavu  ->
  <div id="staveniste">
    <div class="blok">
      <div class="odebrat-blok"></div>
      <div class="ucho"></div>
      <p contenteditable="true">Prostý text</p>
    </div>
    <div class="blok">
      <div class="odebrat-blok"></div>
      <div class="ucho"></div>
      <h2 class="HAP-t-center" contenteditable="true">Nadpis zarovnaný na střed</h2>
    </div>
  </div>
-->


</div><!-- id="demo" -->

CSS

html { font-family: arial,sans-serif;
font-size: 14px; box-sizing: border-box}
*, *:before, *:after { box-sizing: inherit}
body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0;}
ol, ul { list-style: none;}
img { max-width: 100%; height: auto;}
/* ⏸ ▻ ▹ */

#demo {margin:2em auto; padding:1em; max-width:800px; border:4px solid #eee; box-shadow: 0 0 20px -5px #06a inset}
button {cursor:pointer}

#katalog-elementu{	width:100%;	background:#eee; display: flex; flex-wrap: wrap; padding:.5em 0 0 .5em;}
#katalog-elementu:before {content:"#katalog-elementu";display:block;width:100%}
#katalog-elementu .blok{ margin: 0 .5em .5em 0; border:2px solid #06a;background: rgba(255,255,255,.8); border-radius:4px; padding: 10px 20px; height:40px; position:relative}
#katalog-elementu .blok:before {content: "☰"; position:absolute; left:-3px; top:8px}
#katalog-elementu .blok:hover{ cursor:move; box-shadow: 0 0 10px -1px #06a; background:white;}

/* prostor staveniště*/
#staveniste {	width:100%; min-height:200px;	padding:.5em; border:1px solid #06a}
#staveniste:before {content:"#staveniste";display:block;width:100%}
#staveniste .blok { border:1px dotted #06a; margin-bottom:-1px;position:relative}
#staveniste .blok:hover {box-shadow: 0 0 5px #06a }
/* styly bloků*/
#staveniste .HAP-t-center {text-align:center}


/* práce s bloky*/
.blok:hover .odebrat-blok{display:block}
.ucho {opacity:.2;position:absolute;left:-18px;font-size:13px;padding: 2px 2px 3px 3px; border-radius: 5px 0 0 5px; background:#06a;color:white;cursor:move} 
.ucho:before{content:"☰"}
.blok:hover .ucho{opacity:.8}
.odebrat-blok{ display:none; opacity: .85; border-radius: 5px;font-size: 18px;padding: 0 5px;background: #da0000; color:white; position: absolute; z-index: 9; cursor:pointer}
.odebrat-blok:before{content:"♻"}
.ucho:hover:after {content:"Přesun"}
.odebrat-blok:hover:after {content:"Odstranit blok"}
.ucho:hover:after,
.odebrat-blok:hover:after{font-size:14px;position:absolute; bottom:2.1em; left:0;...

JavaScript

// nastavím elemetům vlastnost drag a přiřadím kam je možná vkládat
$('.blok').draggable({
  helper: 'clone', // prvky po vložení klonuju, nepřesouvá
  connectToSortable: '#staveniste'
});
  
  // vkládací prvky ve staveništi, manipulace
  $('#staveniste').sortable({
  handle: '.ucho', // jdou přesouvat jen za ucho
  receive : function(event,ui){
  	var block_id = ui.item.attr('id');
  	var pridatTlacitka='<div class="odebrat-blok"></div><div class="ucho"></div>'; //každýmu prvku přidám ucho na tažení a tlačítko pro smazání
    
    if(block_id == 'HeadingLeft'){pridatTlacitka += '<h2 contenteditable="true">Nadpis zarovnaný vlevo</h2>';
    }else 
    if(block_id == 'HeadingCenter'){pridatTlacitka+= '<h2 class="HAP-t-center" contenteditable="true">Nadpis na střed</h2>';
    }else 
    if(block_id == 'ProstyText'){pridatTlacitka+= '<p contenteditable="true">Prostý text</p>';
    }
    ui.helper.removeAttr('style').addClass('postaveno').html(pridatTlacitka);
  }
});



// odebrat blok přidaný přetažením
function removeBlok() {
  $(this).parent(".blok").remove();
}


// akce tlačítek ve staveništi
$(document).on("click", ".odebrat-blok", removeBlok);