要实现保持背景图像的响应性，同时保持拖放元素的完整性，并与背景图像保持响应，可以使用CSS和JavaScript来实现。

以下是一个示例代码，其中包含一个具有背景图像的容器元素和一个可拖放的元素。在拖放元素时，背景图像将保持响应性，同时拖放元素将保持在正确的位置。

HTML代码:

  
拖放元素

CSS代码:

#container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 背景图像的高宽比例，根据实际情况调整 */
  background-image: url('背景图像的URL');
  background-size: cover;
  background-position: center;
}

#draggable {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: yellow;
  cursor: move;
}

JavaScript代码:

var draggable = document.getElementById('draggable');
var container = document.getElementById('container');

var isDragging = false;
var offsetX = 0;
var offsetY = 0;

draggable.addEventListener('mousedown', function(e) {
  isDragging = true;
  offsetX = e.clientX - draggable.offsetLeft;
  offsetY = e.clientY - draggable.offsetTop;
});

document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    draggable.style.left = (e.clientX - offsetX) + 'px';
    draggable.style.top = (e.clientY - offsetY) + 'px';
  }
});

document.addEventListener('mouseup', function() {
  isDragging = false;
});

在上面的代码中，我们使用CSS的background-size: cover;属性来保持背景图像的响应性。然后，我们使用JavaScript来实现拖放功能。当鼠标按下拖放元素时，我们记录鼠标点击位置与拖放元素的偏移量。然后，在鼠标移动期间，我们根据鼠标的位置和偏移量来更新拖放元素的位置。

请注意，上述代码中的背景图像高宽比例为16:9（即16:9的高宽比例），您可以根据实际情况调整padding-bottom的值，以适应不同的背景图像高宽比例。同时，您可以根据需要自定义拖放元素的样式和行为。