拖动后，元素变得随机不可resize

选择并拖动多个elemens后，其中一些不再可resize：resize图标从右上角消失。

可resize的图标保留在旧位置，不会移动哪些移动的元素。

要重现，请运行下面的代码，使用套索选择所有元素并拖动所选元素。 之后，resize图标会从随机元素中消失，并且这些元素不再可拖动。

如何解决这个问题？

我试图通过添加来解决这个问题

$(".designer-verticalline, .designer-rectangle, .designer-field, .designer-image").resizable(); 

结束drag（）方法但问题仍然存在

报道也在

https://bugs.jqueryui.com/ticket/14898#ticket

小提琴： https ： //jsfiddle.net/txbcj9qy/

       .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; }     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({}); });    
 
 
vnimi+' '+dok.tasudok
 
DOK.kuupaev
 
 
m.FIRMA
 
ise.telefon
 
ise.regnr
 
Tel.
 
Reg.Nr
 
ise.tanav
 
ise.vatpayno
 
KMKR nr
 
rtri(ise.postiindek)+' '+rtri(ise.piirkond)
 
aarve(dok.arvekonto, 'konto.arveldusar')
 
A/A
 
 
klient.regnr
 
klient.nimi
 
Reg.Nr
 
Maksja
 
klient.tanav
 
klient.vatpayno
 
KMKR nr
 
rtri(klient.postiindek)+' ' +rtri(klient.piirkond)
 
sql("sele transfld('nimetus', 'riik', rapopref()) from riik where kood=klient.riik2", '' )
 
klient.aadress
 
Postiaadress
 
dok.tasukuup
 
eval( 'maksetin.' +left(rapopref()+'tingimus',10))
 
Maksetähtaeg
 
iif(!empty(dok.saaja), IR("Saaja: ")+sql('sele rtri(nimi)+" "+rtri(tanav)+" "+rtri(piirkond)+" "+rtri(postiindek) from klient where kood=dok.saaja',''),'')
 
 
 
 GroupHeader 1: str(dokumnr)+str(koopia,2)
 
 
   

Answer 1

问题是可resize的图标也是可选择的，因此当您将它们包含在套索中时，它们会被选中，并且在您拖动时会更改它们的top和left 。

Selectable有一个filter option ，允许指定哪些元素应该是可选择的。 通过将其设置为'.designer-field'它应该解决问题。

 $(".designer-panel-body").selectable({ filter: '.designer-field' }); 

请参阅： https ： //jsfiddle.net/kec4jgvf/1/