HTML5 Drag + Drop

Schippo · 27.09.2015

Hallo Duddle, hallo @All,

ich hoffe, Du liest meinen Post. Du hast mir mal sehr geholfen bei der Erstellung einer Lichterkette für mein Forum http://dogs24.xobor.de (http://kd2002_9318.webspace20.do.de/mydreambook.de/Lichterkette/lichterkette.php). Ich bekomme 2 Dinge einfach nicht hin:

1. der Mutterkerze einen Titel (Beschreibung, wie die Kerze positioniert werden kann) zu verpassen

2. Wie kann ich den Bereich um die Mutterkerze sperren, so daß an dieser keine weitere Kerze angereiht werden kann und sich deutlich als Einzelkerze abhebt? Ich dachte an einen Bereich von ca. 20px.

Hab schon vieles versucht, aber nichts führte zu einer Lösung. Kannst Du mir hier nochmals behilflich sein? Schon jetzt herzlichen Dank.

So sieht der jetzige Code "lichterkette.php" aus:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
html {background-color: #4E4E4E;}
   #kerzenbereich {
    border-color: #B7B7B7;
    border-width: 1px;
    border-style: solid;
    border-radius: 12px;
    width: 880px;
    margin: 0 auto;
    height: 100%;
    min-height: 653px;
    background: #272727;
    padding: 20px;
    position: relative;
    }
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
  (function() {
   'use strict';
   $(document).ready(function()
   {
    $("#verschieben").draggable({
     helper: "clone",
     cursor: "move",
     opacity: 0.7,
     containment: "parent",
     scroll: false
    });
    $("#verschieben").bind('dragstop', function(event, ui) {
     $(this).after($(ui.helper).clone().draggable({
      helper: "original",
      cursor: "move",
      opacity: 0.7,
      containment: "parent",
      scroll: false
     }).attr("id", "neueKerze"));
 
     $("#verschieben").unbind('dragstop');
     var neueKerze = $("#neueKerze");
     neueKerze.append('<a id="speicherlink" href="#">speichern</a>');
     $("#speicherlink").bind("click", function() {
      $.post( "kerzenverwaltung.php", { x: neueKerze.position().left, y: neueKerze.position().top } );
      $(this).remove();
      neueKerze.draggable('disable');
      return false;
     });
    });
   });
  })();
</script>
<div id="kerzenbereich">
  <div class="ui-draggable ui-draggable-handle" id="verschieben"><img src="http://www.4-wände.de/hpfixseparat_blumenkerze_2.gif"></div>
  <?php include('kerzenverwaltung.php'); ?>
</div>
</body>
</html>

Gruß Schippo

Schippo · 02.10.2015

Hallo @All,

konnte die Probleme zwischenzeitlich selbst lösen und somit wird hier keine Hilfe mehr benötigt.

Gruß Schippo