How to avoid flickering effect with javascript drag and drop.

Question

I use the following javascript (with jQuery) to handle drag and drop on a script I am writing:

jsc.ui.dragging = false;
jsc.ui.drag_element = {};
$(".drag-target").mousedown(function() {
 jsc.ui.drag_element =  $(this);
 jsc.ui.dragging = true;
});
$("html").mousemove(function(e) {
 if(jsc.ui.dragging) {
  jsc.ui.drag_element.css({"position": "absolute", "top": e.clientY - 1, "left": e.clientX - 1, "z-index": "100"}); // - 1s are due to IE not leaving go otherwise
  $("#overlay").show(); // Overlay stops text beneath being selected. TODO Stop current elements text being selected.
 }
});
$(".drag-target").mouseup(function() {
 if(jsc.ui.dragging) {
  jsc.ui.dragging = false;
  jsc.ui.drag_element.css("z-index", "98");
  $("#overlay").hide();
 }
});

However when the object is being dragged, the text inside it has a flickering selection i.e. it is being selected on and off as the element is moved. Is there any way to prevent this, or hide it's effect?

Answer 1

I think the extent of the effect depends on your hardware and video driver. To avoid it entirely, you could just draw a rectangle and then redraw the window when the mouse button is released.

Answer 2

Is there a reason for not using jQuery UI Draggable ? Your code would look like that:

$(".drag-target").draggable();

You should at least check how it's build, it may help you to solve you flickering problem.