Opened 7 years ago
Closed 6 years ago
#14898 closed bug (notabug)
After dragging some elements become randomly not resizeable
| Reported by: | kobruleht | Owned by: | kobruleht |
|---|---|---|---|
| Priority: | major | Milestone: | none |
| Component: | ui.resizable | Version: | 1.11.3 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description (last modified by )
After multiple elemens are selected and dragged, some of them are no more resizable: resize icon disappear from right corner.
To reproduce:
Run code below, select all elements using lasso and drag selected elements. After that resize icon disappers from some elements and those elements are no more draggable. If this will not happen first time, select again and drag bit differently.
Fiddle is at https://jsfiddle.net/txbcj9qy/
Reported also in http://stackoverflow.com/questions/34698117/elements-became-randomly-non-resizable-after-dragging
<!-- begin snippet: js hide: false --> <!-- language: lang-html --> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <style> .designer-panel-body { min-height: 1px; overflow: hidden; margin: 0; padding: 0; } .panel-footer { background-color: inherit; } .designer-panel, .designer-resetmargins { margin: 0; padding: 0; } .designer-verticalline, .designer-horizontalline, .designer-rectangle { font-size: 1pt; border: 1px solid #000000; } .designer-field { border: 1px solid lightgray; white-space: pre; overflow: hidden; } .ui-selecting { background-color: lightskyblue; color: white; } .ui-selected { background-color: lightskyblue; border-color: darkblue; color: white; } .designer-label { white-space: pre; /*overflow: hidden;*/ } .designer-field, .designer-label { font-family: "Times New Roman"; font-size: 10pt; z-index: 2; } .designer-verticalline, .designer-horizontalline, .designer-rectangle, .designer-field, .designer-image, .designer-label { position: absolute; } </style> <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.js"></script> <script> function getpos(e) { return { X: e.pageX, Y: e.pageY }; } function Rect(start, stop) { this.left = Math.min(start.X, stop.X); this.top = Math.min(start.Y, stop.Y); this.width = Math.abs(stop.X - start.X); this.height = Math.abs(stop.Y - start.Y); } $(function() { var startpos; var selected = $([]), offset = { top: 0, left: 0 }; $(".designer-verticalline, .designer-rectangle, .designer-field, .designer-image").resizable(); // http://stackoverflow.com/questions/705250/is-there-a-jquery-plugin-which-combines-draggable-and-selectable#8643716 // teha: seal on ka mousedown mis andis viga, kaseda kasutada var $liigutatavad = $(".designer-verticalline, .designer-horizontalline, .designer-rectangle, .designer-field, .designer-image, .designer-label"); $liigutatavad.draggable({ start: function(event, ui) { var $this = $(this); if ($this.hasClass("ui-selected")) { // if this is selected, attach current offset // of each selected element to that element selected = $(".ui-selected").each(function() { var el = $(this); el.data("offset", el.offset()); }); } else { // if this is not selected, clear current selection selected = $([]); $liigutatavad.removeClass("ui-selected"); } offset = $this.offset(); }, drag: function(event, ui) { // drag all selected elements simultaneously var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left; selected.not(this).each(function() { var $this = $(this); var elOffset = $this.data("offset"); $this.css({ top: elOffset.top + dt, left: elOffset.left + dl }); }); // this does not fix the issue: //$(".designer-verticalline, .designer-rectangle, .designer-field, .designer-image").resizable(); } }); // ...but manually implement selection to prevent interference from draggable() $(".designer-panel-body").on("click", "div", function(e) { if ( /*!e.metaKey &&*/ !e.shiftKey && !e.ctrlKey) { // deselect other elements if meta/shift not held down $(".designer-panel-body").removeClass("ui-selected"); $(this).addClass("ui-selected"); } else { if ($(this).hasClass("ui-selected")) { $(this).removeClass("ui-selected"); } else { $(this).addClass("ui-selected"); } } //var selectable = $("#container").data("selectable"); //selectable.refresh(); //$( ".designer-panel-body" ).data("selectable")._mouseStop(null); }); $(".designer-panel-body").selectable({}); }); </script> </head> <body> <div class='panel designer-panel'> <div class='panel-body designer-panel-body panel-warning' style='height:9.37cm'> <div class='designer-field' contenteditable='true' style='top:2.30cm;left:5.84cm;width:10.24cm;height:0.63cm;font-family:Arial;font-size:14pt;font-weight:bold;'>vnimi+' '+dok.tasudok</div> <div class='designer-field' contenteditable='true' style='top:2.30cm;left:16.37cm;width:2.68cm;height:0.61cm;font-size:14pt;'>DOK.kuupaev</div> <div class='rectangle' style='border-width: 1px;background-color:#FFFFFF;top:2.99cm;left:1.34cm;width:18.05cm;height:5.29cm'></div> <div class='designer-field' contenteditable='true' style='top:3.01cm;left:1.53cm;width:9.71cm;height:0.55cm;font-size:12pt;'>m.FIRMA</div> <div class='designer-field' contenteditable='true' style='top:3.01cm;left:12.13cm;width:3.13cm;height:0.53cm;font-size:12pt;'>ise.telefon</div> <div class='designer-field' contenteditable='true' style='top:3.01cm;left:17.11cm;width:1.89cm;height:0.55cm;font-size:12pt;text-align:right;'>ise.regnr</div> <div class='designer-label' contenteditable='true' style='top:3.04cm;left:11.39cm;text-align:right;font-size:12pt;'>Tel.</div> <div class='designer-label' contenteditable='true' style='top:3.04cm;left:15.71cm;font-size:12pt;'>Reg.Nr</div> <div class='designer-field' contenteditable='true' style='top:3.62cm;left:1.55cm;width:9.45cm;height:0.55cm;font-size:12pt;'>ise.tanav</div> <div class='designer-field' contenteditable='true' style='top:3.70cm;left:15.16cm;width:3.37cm;height:0.55cm;font-size:12pt;'>ise.vatpayno</div> <div class='designer-label' contenteditable='true' style='top:3.72cm;left:12.89cm;text-align:right;font-size:12pt;'>KMKR nr</div> <div class='designer-field' contenteditable='true' style='top:4.30cm;left:1.58cm;width:9.08cm;height:0.55cm;font-size:12pt;'>rtri(ise.postiindek)+' '+rtri(ise.piirkond)</div> <div class='designer-field' contenteditable='true' style='top:4.30cm;left:14.66cm;width:4.34cm;height:0.55cm;font-size:12pt;text-align:right;'>aarve(dok.arvekonto, 'konto.arveldusar')</div> <div class='designer-label' contenteditable='true' style='top:4.33cm;left:13.89cm;font-size:12pt;'>A/A</div> <div class='designer-horizontalline' style='border-width: 1px;top:4.96cm;left:1.34cm;width:18.03cm;height:0.00cm'></div> <div class='designer-field' contenteditable='true' style='top:5.04cm;left:17.13cm;width:1.89cm;height:0.55cm;font-size:12pt;text-align:right;'>klient.regnr</div> <div class='designer-field' contenteditable='true' style='top:5.06cm;left:4.18cm;width:12.71cm;height:0.55cm;font-size:12pt;'>klient.nimi</div> <div class='designer-label' contenteditable='true' style='top:5.06cm;left:15.74cm;font-size:12pt;'>Reg.Nr</div> <div class='designer-label' contenteditable='true' style='top:5.09cm;left:1.63cm;font-size:12pt;'>Maksja</div> <div class='designer-field' contenteditable='true' style='top:5.72cm;left:1.53cm;width:11.68cm;height:0.55cm;font-size:12pt;'>klient.tanav</div> <div class='designer-field' contenteditable='true' style='top:5.72cm;left:15.18cm;width:3.37cm;height:0.55cm;font-size:12pt;'>klient.vatpayno</div> <div class='designer-label' contenteditable='true' style='top:5.75cm;left:12.92cm;text-align:right;font-size:12pt;'>KMKR nr</div> <div class='designer-field' contenteditable='true' style='top:6.38cm;left:1.53cm;width:11.84cm;height:0.55cm;font-size:12pt;'>rtri(klient.postiindek)+' ' +rtri(klient.piirkond)</div> <div class='designer-field' contenteditable='true' style='top:6.38cm;left:13.47cm;width:3.37cm;height:0.55cm;font-size:12pt;'>sql("sele transfld('nimetus', 'riik', rapopref()) from riik where kood=klient.riik2", '' )</div> <div class='designer-field' contenteditable='true' style='top:6.99cm;left:3.71cm;width:12.16cm;height:1.16cm;font-size:12pt;'>klient.aadress</div> <div class='designer-label' contenteditable='true' style='top:7.01cm;left:1.45cm;text-align:right;font-size:12pt;'>Postiaadress</div> <div class='designer-field' contenteditable='true' style='top:8.33cm;left:3.95cm;width:2.11cm;height:0.55cm;font-size:12pt;'>dok.tasukuup</div> <div class='designer-field' contenteditable='true' style='top:8.33cm;left:6.08cm;width:8.05cm;height:0.55cm;font-size:12pt;'>eval( 'maksetin.' +left(rapopref()+'tingimus',10))</div> <div class='designer-label' contenteditable='true' style='top:8.35cm;left:1.45cm;font-size:12pt;'>Maksetähtaeg</div> <div class='designer-field' contenteditable='true' style='top:8.91cm;left:1.45cm;width:13.66cm;height:0.45cm;'>iif(!empty(dok.saaja), IR("Saaja: ")+sql('sele rtri(nimi)+" "+rtri(tanav)+" "+rtri(piirkond)+" "+rtri(postiindek) from klient where kood=dok.saaja',''),'')</div> </div> <div class='bg-warning'> <div class='panel-footer'><i class='glyphicon glyphicon-chevron-up'></i> GroupHeader 1: str(dokumnr)+str(koopia,2)</div> </div> </div> </body> </html> <!-- end snippet -->
Change History (3)
comment:1 Changed 7 years ago by
| Description: | modified (diff) |
|---|
comment:2 Changed 7 years ago by
| Owner: | set to kobruleht |
|---|---|
| Status: | new → pending |
comment:3 Changed 6 years ago by
| Resolution: | → notabug |
|---|---|
| Status: | pending → closed |
Closing due to inactivity.
Note: See
TracTickets for help on using
tickets.
It seems like there's a lot of unrelated code in that example. Can you please reduce this to the minimal code to reproduce the bug and do so in jsFiddle or jsbin as requested in the red box? Thanks.