Chat with us, powered by LiveChat
← Return to MyDisct Solver

Drag CAPTCHA Image Solving

Solve drag-and-drop image captchas with precise coordinate calculation. Drag CAPTCHAs require moving puzzle pieces or objects to correct positions with 99.1% accuracy.

What is Drag CAPTCHA Image?

Drag CAPTCHAs present a puzzle where users must drag an object (like a puzzle piece, slider, or movable element) to a specific target position within an image. The challenge requires precise coordinate calculation to position the draggable element correctly relative to the target area.

Captcha Type

Use the following captcha type identifier in your API requests: 

"type": "DRAG_CAPTCHA_IMAGE"

Request Format

POST /createTask

Request Parameters

Parameter Type Required Description
auth.token string required Your API key
captcha.type string required Must be "DRAG_CAPTCHA_IMAGE"
captcha.metadata.siteUrl string required The URL where the captcha appears
captcha.payload.images array required Array of base64-encoded images
captcha.payload.question string required The drag instruction (e.g., "Drag the piece to complete the puzzle")
captcha.payload.referenceImages array optional Additional reference images (if provided)

Example Request

JavaScript 
const response = await fetch('https://solver-api.mydisct.com/createTask', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'apikey': 'YOUR_API_KEY'
  },
  body: JSON.stringify({
    auth: {
      token: 'YOUR_API_KEY'
    },
    context: {
      source: 'api',
      version: '1.0.0'
    },
    captcha: {
      type: 'DRAG_CAPTCHA_IMAGE',
      metadata: {
        siteUrl: 'https://example.com'
      },
      payload: {
        images: ['base64_encoded_main_image'],
        question: 'Drag the piece to complete the puzzle',
        questionType: 'drag',
        referenceImages: []
      }
    }
  })
});

const data = await response.json();
console.log('Task ID:', data.task.id);

Response Format

Create Task Response (Processing)

{
  "success": true,
  "service": "MyDisct Solver",
  "message": "Task created successfully",
  "task": {
    "id": "MyDisctSolver_drag123def456",
    "status": "processing",
    "timestamp": "2025-11-05T12:00:00.000Z"
  }
}

Fetch Result Response (Processing)

{
  "success": true,
  "service": "MyDisct Solver",
  "task": {
    "id": "MyDisctSolver_drag123def456",
    "status": "processing",
    "timestamp": "2025-11-05T12:00:00.000Z"
  }
}

Fetch Result Response (Completed)

{
  "success": true,
  "service": "MyDisct Solver",
  "message": "Captcha solved successfully",
  "task": {
    "id": "MyDisctSolver_drag123def456",
    "status": "completed",
    "result": {
      "answers": [[50, 100], [250, 100]],
      "timestamp": "2025-11-05T12:00:05.000Z"
    }
  }
}
Understanding the Response

The answers array contains two [x, y] coordinate pairs. The first pair [50, 100] indicates where to start the drag operation, and the second pair [250, 100] indicates where to drop the element.

Implementation Guide

Step 1: Extract Images

// Get the main image
const mainImage = document.querySelector('.captcha-image img');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = mainImage.naturalWidth;
canvas.height = mainImage.naturalHeight;
ctx.drawImage(mainImage, 0, 0);

const imageBase64 = canvas.toDataURL('image/png').split(',')[1];

const questionText = document.querySelector('.captcha-instruction').textContent;

Step 2: Send to API and Poll

async function solveDragCaptcha(siteUrl, imageBase64, question) {
  const createResponse = await fetch('https://solver-api.mydisct.com/createTask', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'apikey': 'YOUR_API_KEY'
    },
    body: JSON.stringify({
      auth: { token: 'YOUR_API_KEY' },
      context: { source: 'api', version: '1.0.0' },
      captcha: {
        type: 'DRAG_CAPTCHA_IMAGE',
        metadata: { siteUrl },
        payload: {
          images: [imageBase64],
          question: question,
          questionType: 'drag',
          referenceImages: []
        }
      }
    })
  });

  const createData = await createResponse.json();
  if (!createData.success) throw new Error(createData.error.message);

  const taskId = createData.task.id;

  while (true) {
    await new Promise(resolve => setTimeout(resolve, 2000)); // Wait 2 seconds

    const resultResponse = await fetch('https://solver-api.mydisct.com/fetchResult', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'apikey': 'YOUR_API_KEY'
      },
      body: JSON.stringify({ taskId })
    });

    const resultData = await resultResponse.json();
    if (resultData.task.status === 'completed') {
      return resultData.task.result.answers;
    } else if (resultData.task.status === 'failed') {
      throw new Error('Drag captcha solving failed');
    }
  }
}

Step 3: Apply Solution

// Usage
async function handleDragCaptcha() {
  const imageBase64 = getImageBase64();
  const question = getQuestionText();
  const answers = await solveDragCaptcha(window.location.href, imageBase64, question);

  const [[fromX, fromY], [toX, toY]] = answers;

  const draggableElement = document.querySelector('.draggable-piece');
  const dropTarget = document.querySelector('.drop-target');

  const imageRect = document.querySelector('.captcha-image').getBoundingClientRect();
  const pageFromX = imageRect.left + fromX;
  const pageFromY = imageRect.top + fromY;
  const pageToX = imageRect.left + toX;
  const pageToY = imageRect.top + toY;

  const dragStartEvent = new MouseEvent('mousedown', {
    clientX: pageFromX,
    clientY: pageFromY,
    bubbles: true
  });
  draggableElement.dispatchEvent(dragStartEvent);

  await new Promise(resolve => setTimeout(resolve, 100));

  const dragEndEvent = new MouseEvent('mouseup', {
    clientX: toX,
    clientY: toY,
    bubbles: true
  });
  document.dispatchEvent(dragEndEvent);
}

Python Example

Python 
import requests
import base64
import time

def solve_drag_captcha(site_url, image_path, question, api_key):
    """Solve drag captcha challenge"""
    # Step 1: Convert image to base64
    with open(image_path, 'rb') as image_file:
        image_base64 = base64.b64encode(image_file.read()).decode('utf-8')

    # Step 2: Create task
    create_response = requests.post(
        'https://solver-api.mydisct.com/createTask',
        headers={
            'Content-Type': 'application/json',
            'apikey': api_key
        },
        json={
            'auth': {'token': api_key},
            'context': {'source': 'api', 'version': '1.0.0'},
            'captcha': {
                'type': 'DRAG_CAPTCHA_IMAGE',
                'metadata': {'siteUrl': site_url},
                'payload': {
                    'images': [image_base64],
                    'question': question,
                    'questionType': 'drag',
                    'referenceImages': []
                }
            }
        }
    )

    create_data = create_response.json()
    if not create_data['success']:
        raise Exception(create_data['error']['message'])

    task_id = create_data['task']['id']
    print(f'Task created: {task_id}')

    # Step 3: Poll for result
    while True:
        time.sleep(2)  # Wait 2 seconds

        result_response = requests.post(
            'https://solver-api.mydisct.com/fetchResult',
            headers={
                'Content-Type': 'application/json',
                'apikey': api_key
            },
            json={'taskId': task_id}
        )

        result_data = result_response.json()
        if result_data['task']['status'] == 'completed':
            return result_data['task']['result']['answers']
        elif result_data['task']['status'] == 'failed':
            raise Exception('Drag captcha solving failed')

        print('Waiting for solution...')

# Example usage
answers = solve_drag_captcha(
    site_url='https://example.com/captcha',
    image_path='captcha_image.png',
    question='Drag the piece to complete the puzzle',
    api_key='YOUR_API_KEY'
)

# answers = [[fromX, fromY], [toX, toY]]
from_coords, to_coords = answers
print(f'Drag from ({from_coords[0]}, {from_coords[1]}) to ({to_coords[0]}, {to_coords[1]})')
# Output: Drag from (50, 100) to (250, 100)

Best Practices

Recommendations
  • Image Quality: Ensure images are captured at full resolution without compression
  • Question Extraction: Include the complete drag instruction for accurate processing
  • Polling Intervals: Use 2-3 second intervals between fetchResult requests
  • Coordinate Conversion: Convert image coordinates to page coordinates for accurate dragging
  • Drag Simulation: Use proper mouse events (mousedown, mousemove, mouseup) for drag operations
  • Element Selection: Ensure you're dragging the correct element and dropping in the right location
  • Timeout Management: Set reasonable timeouts (max 2 minutes) for solving

Common Issues

Issue: Drag operation not working

Solution: Ensure you're converting image coordinates to page coordinates correctly. The coordinates returned are relative to the image, not the entire page.

Issue: Wrong element being dragged

Solution: Verify you're selecting the correct draggable element using proper CSS selectors. Some captchas may have multiple draggable elements.

Issue: Drop target not accepting drag

Solution: Ensure the drop coordinates are within the valid drop zone area. Some captchas have specific drop target areas that must be hit precisely.