javascript - Positioning Element of jQuery using append -
when dragging 1 container want element append inside container. feature can't seem decipher why when element appends offset container trying drop in.
it might have css cannot pinpoint going on. depicted below happening.
to this
i want box in borders of new box appending to.
the code
html
<!doctype html> <html > <head> <meta charset="utf-8"> <title>grid-cell playground</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/> <div class="grid drag-menu"> <div class="grid-cell "> <div class="plus-icon"></div> </div> <div class="grid-cell "> <div class="plus-icon"></div> </div> <div class="grid-cell "> <div class="plus-icon"></div> </div> <div class="grid-cell "> <div class="plus-icon"></div> </div> <div class="grid-cell "> <div class="plus-icon"></div> </div> <div class="grid-cell "> <div class="plus-icon"></div> </div> <div class="grid-cell "> <div class="plus-icon"></div> </div> <div class="grid-cell "> <div class="plus-icon"></div> </div> <div class="grid-cell "> <div class="plus-icon"></div> </div> <div class="grid-cell "> <div class="plus-icon"></div> </div> </div> <script src="js/index.js"></script> </body> </html> javascript
var = 0; var yourcurrentlyhoveredelement; var containerplus = false; $('.grid-cell') .attr("id", 'originalparents') .draggable({ containment: ".grid-containment :hover", scroll: false }) .resizable() .droppable({ over: function (event, ui) { yourcurrentlyhoveredelement = $(this); //the 'this' under on event }, drop: function (event, ui) { var target = ui.draggable; console.log(target); if (yourcurrentlyhoveredelement.attr("id") === "originalparents") { yourcurrentlyhoveredelement.append(target); } } }); $( ".plus-icon" ).click(function() { $(this).parent(".grid-cell").append("<div class='grid-cell' onmouseover='call_mouseover()'><p class='number' id = '\" + + \"'>" + + "</p>" + "</div>"); /*1st grid-cell created*/ $(this).parent(".grid-cell").addclass("grid"); $('.grid-cell') .draggable({containment: ".grid-containment", scroll: false}) .resizable(); i++; $('.number') .draggable({containment: ".grid-cell", scroll: false}); }); function call_mouseover() { } the css
body { font: 100 1em/150% "proxima-nova", helvetica, sans-serif; margin: 0; position:relative; } .cm-container { margin: 0 35px; border: 3px solid #03a9f4; } .grid { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; } .grid-column { flex-direction: column; display: flex; flex-wrap: wrap; } .grid-center { justify-content: center; align-items: center; } .grid-align-center { align-items: center; } .grid-right { justify-content: flex-end; align-items: center; } .grid-column-right { justify-content: center; align-items: flex-end; } .grid-space-around { justify-content: space-around; } .grid-space-between { justify-content: space-between; } .grid-cell { padding: 4em 4em 4em; background: rgba(51, 153, 204, .2); transition: background-color 0.3s ease; border: 1px solid #33cccc; border-radius: 3px; position: relative; cursor: crosshair; } .grid-cell:hover { background: rgba(255, 152, 0, 0.29); } .self-end { align-self: flex-end; } .self-start { align-self: flex-start; } .self-center { align-self: center; } .self-stretch { align-self: stretch; } /* flex sizes */ .flex-1 { flex: 1; } /* text centering*/ .text-center { text-align: center; } /* other styles */ .title { color: #000; font-size: 11px; position: absolute; top: -14px; right: 4px; } .plus-icon { background-image: url("https://cdn0.iconfinder.com/data/icons/math-business-icon-set/93/1_1-512.png"); background-size: cover; height:14px; width:14px; position: absolute; right: 2.5px; top: 2.5px; cursor:pointer; opacity:0.1; transition: 0.5s; } .plus-icon:hover { transition: 0.5s; opacity:1; } .m-paragraph { max-width: 250px; } .margin-right { margin-right: auto; } .margin-left { margin-left: auto; } .margin-top { margin-top: auto; } /* single-page build settings */ .main-grid-cell { height: 93.5vh; margin-top: 1px; } .logo { padding: 0; } #logosvg { width: 115px; height:50px; } .st1 { fill: #ffffff; stroke: #fff; stroke-width: 4; } svg:hover { cursor: pointer; } any explanation offset appending?
edit: attached js fiddle
https://jsfiddle.net/ecnfk54h/5/
so make 2 of boxes kind of bigger , use plus sign on 1 of boxes. append new div container number. drag numbered box container , drop it, item's position offset outside of new container dropping in. wondering causing give incorrect position inside new container.
wasn't best strategy if wants know. took data inside target. transformed object html element , appended new element , removed previous one. worked out pretty more convoluted run problems
var target = ui.draggable.html(); if (yourcurrentlyhoveredelement.attr("id") === "originalparents") { yourcurrentlyhoveredelement.append("<div class ='.grid-cell' onmouseover='call_mouseover()'><div class='remove'>×</div>" + target + "</div>"); } in javascript code can find that.
Comments
Post a Comment