Your job can look like this:import numpy as np import pyqtgraph as pg from pyqtgraph.Qt import QtCore, QtGui pg.setConfigOptions(antialias=True) w = pg.GraphicsWindow() w.setWindowTitle('Draggable') class Graph(pg.GraphItem): def init(self): self.dragPoint = None self.dragOffset = None pg.GraphItem.init(self) def setData(self, **kwds): self.data = kwds if 'pos' in self.data: npts = self.data['pos'].shape[0] self.data['adj'] = np.column_stack( (np.arange(0, npts-1), np.arange(1, npts)) ) self.data['data'] = np.empty(npts, dtype=[('index', int)]) self.data['data']['index'] = np.arange(npts) self.updateGraph() def updateGraph(self): pg.GraphItem.setData(self, **self.data) def mouseDragEvent(self, ev): if ev.button() != QtCore.Qt.LeftButton: ev.ignore() return if ev.isStart(): pos = ev.buttonDownPos() pts = self.scatter.pointsAt(pos) if len(pts) == 0: ev.ignore() return self.dragPoint = pts[0] ind = pts[0].data()[0] self.dragOffset = self.data['pos'][ind][1] - pos[1] elif ev.isFinish(): self.dragPoint = None return else: if self.dragPoint is None: ev.ignore() return ind = self.dragPoint.data()[0] self.data['pos'][ind][1] = ev.pos()[1] + self.dragOffset self.data['pos'][ind][0] = ev.pos()[0] + self.dragOffset self.updateGraph() ev.accept() g = Graph() v = w.addPlot() v.addItem(g) v <---- попробуйте изменить значение x = np.linspace(1, 10, 3) pos = np.column_stack((x, np.sin(x))) g.setData(pos=pos, size=10, pxMode=True) if name == 'main': import sys if (sys.flags.interactive != 1) or not hasattr(QtCore, 'PYQT_VERSION'): QtGui.QApplication.instance().exec_()

Okay, thank you all for watching and liquoring my problem: But I could find a solution myself:I needed to complete the condition with a precise indication of the heterator in the mass.i != cardsArray[0] and similar in the second casei != cardsArray.length - 1 That's it. I hope I help someone else with my decision.Good luck!

Some html default elements have properties draggable="true"e.g. <a> and <img>♪ If inside the card indicate for img draggable="false"the drag event will be handled by the parent..card { background: brown; display: inline-block; }<div class="card" draggable="true"> <h3>img draggable off</h3> <img class="card__img" src="https://picsum.photos/200/300" draggable="false"> <div class="card__body"> <p class="card__title">Title</p> <p class="card__subtitle">Subtitle</p> </div> </div> <div class="card card2" draggable="true"> <h3>img draggable default</h3> <img class="card__img" src="https://picsum.photos/200/300"> <div class="card__body"> <p class="card__title">Title</p> <p class="card__subtitle">Subtitle</p> </div> </div>

First, instead of permanent connections and disengagement of event listeners, it's best to identify the listeners once and then run some flags. This could be, for example, global variables.Second, you have to cancel the transfusion. ondragstart)Truck, track onmouseup Better. windowthan the block itself. It's good to see the "compression" buttons of mice go off the block. Plus, it's also good to hear the event. blur The same. window♪ It's good to have the mouse's button cut out of the window.Fourthly, the courser has useful properties movementX and movementY♪Five, what about five? Just revoke the clicks on the transmissions as in the code below.UPDATEAdded the code hiding the display:.scroll{ -ms-overflow-style: none; /* IE 10+ */ scrollbar-width: none; /* Firefox */ scrollbar-visibility: hidden; } .scrol::-webkit-scrollbar { display: none; /* Chrome Safari */ } var movement = false; var mousedown = false; function onMouseMove(e){ e.preventDefault(); e.stopPropagation(); if(mousedown) { movement = true; this.scrollLeft -= event.movementX; this.scrollTop -= event.movementY; } } function onMouseDown(){ mousedown = true; movement = false; } function onMouseUp(e){ mousedown = false; setTimeout(()=>movement = false, 10); } function onMouseClick(e){ if(movement){ e.preventDefault(); e.stopPropagation(); } } function onDragStart(e){ e.preventDefault(); e.stopPropagation(); } var scr = $(".scroll"); scr.mousemove(onMouseMove); scr.mousedown(onMouseDown); $(window).mouseup(onMouseUp); window.addEventListener('dragstart',onDragStart); window.addEventListener('blur',onMouseUp); $('.scroll a').click(onMouseClick);.scroll{ overflow-y: auto; cursor: pointer; -ms-overflow-style: none; /* IE 10+ / scrollbar-width: none; / Firefox / scrollbar-visibility: hidden; } .scrol::-webkit-scrollbar { display: none; / Chrome Safari */ } .scroll-q{ display: block; white-space: nowrap; } .specstag { display: inline-block; font-size: 98%; font-weight: 600; background: #fff700; border: 1px solid #ccc; border-radius: 16px; padding: 8px 18px; cursor: pointer; text-decoration: none !important; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="scroll"> <div class="scroll-q"> <a href="/" class="specstag" title="Best price">Best price</a> <a href="/" class="specstag" title="Без категории">Без категории</a> <a href="/" class="specstag" title="Low price">Low price</a> <a href="/" class="specstag" title="New!!!">New!!!</a> <a href="/" class="specstag" title="Top rated">Top rated</a> <a href="/" class="specstag" title="Б/У-шка">Б/У-шка</a> <a href="/" class="specstag" title="Android 10">Android 10</a> <a href="/" class="specstag" title="SmartTV">SmartTV</a> <a href="/" class="specstag" title="IOSx">IOSx</a> <a href="/" class="specstag" title="Новинка!">Новинка!</a> </div> </div> <div class="scroll"> <div class="scroll-q"> <a href="/" class="specstag" title="Best price">Best price</a> <a href="/" class="specstag" title="Без категории">Без категории</a> <a href="/" class="specstag" title="Low price">Low price</a> <a href="/" class="specstag" title="New!!!">New!!!</a> <a href="/" class="specstag" title="Top rated">Top rated</a> <a href="/" class="specstag" title="Б/У-шка">Б/У-шка</a> <a href="/" class="specstag" title="Android 10">Android 10</a> <a href="/" class="specstag" title="SmartTV">SmartTV</a> <a href="/" class="specstag" title="IOSx">IOSx</a> <a href="/" class="specstag" title="Новинка!">Новинка!</a> </div> </div>

The problem was: in an attempt to reach the edge, the object was dispersed and the entire logic javascript was completely broken, everything was decided when it was added to the sss.body { user-select:none; }

Add to the beginning of the events if(e.target!=parent) return;

Try moving the intellect to start. Maybe something didn't come from that list. sudo pacman -Syu xf86-video-intel libva-intel-driver intel-media-sdk intel-media-driver vulkan-intel intel-ucode intel-tbb intel-gmmlib libmfx lib32-vulkan-intel and reboot.

According to the https://www.w3.org/TR/2017/REC-html52-20171214/editing.html#the-drag-data-store The display is an optical function:The following information, used to generate the UI feedback during the drag:User-agent-defined default feedback information, known as the drag data store default feedback.Optionally, a bitmap image and the coordinate of a point within that image, known as the drag data store bitmap and drag data store hot spot coordinate.For example, in Chrome and Safari there is no gradient of transparency on MacOS regardless of size.The gradient, who is present on Windows, shows in part the coordinates of the point for which the overstretching occurs.A little information also provides a section https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations MDN:Setting the drag feedback imageWhen a drag occurs, a translucent image is generated from the drag target (the element the "dragstart" event is fired at). ♪ ♪One way or another, it is not worth relying on this conduct because it is not standardized. In cases where the conduct is relevant, the standard provides for use https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage dataTransfer.setDragImage(element, x, y)Uses the given element to update the drag feedback, replacing any previously specified feedback.The same is recommended by MDN:...you can use setDragImage() to specify a custom drag feedback image.UPD. It's just Windows. All the pictures more than 240 pics on any gradient. In 2013, this value was https://stackoverflow.com/q/18841228/3344612 ♪Indeed, unfortunately, the pictures delivered through setDragImagetoo. In this case, javascripts should be used to manipulate refinishable objects.

Something like that.//Розовый let draggable = document.querySelector(".draggable"); //Зеленый let droppable = document.querySelector(".droppable"); //Обработчик события начала перетаскивания draggable.ondragstart = (e) => { //определяем родителя let parrent = e.currentTarget.parentElement; //передаем ID родителя e.dataTransfer.setData('id', parrent.getAttribute("id")); } //Отмена дефолтных реакци на перетаскивание к дропу. droppable.ondragover = (e) => { e.preventDefault(); } //Событие на дроп айтема droppable.ondrop = (e) => { //извлекаем ID родителя и находим его. let item = document.getElementById(e.dataTransfer.getData('id')); //применяем родителя к дропу e.currentTarget.append(item) }.wrapper { display: flex; } .parrent { width: 200px; height: 200px; border: 1px solid black; background: lightblue; } .draggable { background: pink; width: 100px; height: 100px; } .droppable { min-width: 300px; min-height: 300px; background: lightgreen; }<div class="wrapper"> <div class="parrent" id="parrentID"> Parrent <div class="draggable" draggable=true> Draggable </div> </div> <div class="droppable"> Droppable </div> </div>

Maybe something like that will help you:draggable('#draggable') function draggable(selector){ let dragging; document.querySelectorAll(selector).forEach(d => { d.onmousedown = e => dragging = { el: d, x: parseInt(d.style.left||0)/100 - e.x/innerWidth, y: parseInt(d.style.top||0)/100 - e.y/innerHeight }; }); function dragWindow(d, e) { d.el.style.left = (d.x + e.x/innerWidth)*100 + '%'; d.el.style.top = (d.y + e.y/innerHeight)*100 + '%'; } addEventListener('mousemove', e => dragging && dragWindow(dragging, e)); addEventListener('mouseup', e => dragging = null) }#draggable { width: 150px; height: 150px; padding: 0.5em; position:absolute; border:solid; }<div id="draggable" class="ui-widget-content"> <p>Drag</p> </div>