Выделение перетаскиванием

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я хочу создать на своем сайте функциональность, которая будет выделять область перетаскивания для удобства пользователя.

Я откопал код, который отлично работает на JSFIDDLE. Но не могу выполнять какие-либо действия на моем локальном сервере.

Я также включил библиотеку Java script, но результаты такие же разочаровывающие, как и предыдущие попытки. Возможно, я что-то упускаю.

Я также даю ссылку на JSFiddle, где код находится в рабочем состоянии.

ДЕМОНСТРАЦИЯ

HTML

 <div id='container'><div name='drop' style='display: none;'>DROP HERE</div><div name='drag'>DRAG HERE</div></div>

jQuery

 var $dropTarget = $("#container");
$(document).bind("dragover", function(e) {
    if ($dropTarget.hasClass("highlight"))
        return;

    $dropTarget.addClass("highlight");
    $dropTarget.find("[name='drop']").show();
    $dropTarget.find("[name='drag']").hide();
}).bind("dragleave drop", function(e) {
    if (!$dropTarget.hasClass("highlight"))
        return;

    $dropTarget.removeClass("highlight");
    $dropTarget.find("[name='drop']").hide();
    $dropTarget.find("[name='drag']").show();
});

CSS

 #container {
    padding: 10px;
    background: #fdd;
    border: 2px solid #fdd;
}
#container [name=drop] {
    padding: 10px;
    background: #dfd;
    border: 2px solid #dfd;
}
#container [name=drag] {
    padding: 10px;
    background: #ddf;
    border: 2px solid #ddf;
}
.highlight {
    border-color: #fc0;
}

1. Добро пожаловать в Stack Overflow! Посмотрите в консоль ошибок JavaScript и сообщите, какие ошибки вы там видите и на какие строки они указывают. Если ошибок нет, загляните на вкладку сеть инструментов разработчика браузера и убедитесь, что все скрипты загружены правильно.

2. Ваш jQuery упакован в вызов document ready или загружен в конце документа?

3. Кроме того, jsfiddle ничего не делает для меня (Chrome).

4. у меня тоже не работает (safari 6.1.4)

Ответ №1:

Сработало для меня-

 // var $dropTarget = $("#container");
$(document).bind("dragover", function(e) {
    if ($("#container").hasClass("highlight"))
        return; 

    $("#container").addClass("highlight");
    $("#container").find("[name='drop']").show();
    $("#container").find("[name='drag']").hide();
}).bind("dragleave drop", function(e) {
    // alert('asdasd');
   if (!$("#container").hasClass("highlight"))
        return; 
    $("#container").removeClass("highlight");
    $("#container").find("[name='drop']").hide();
    $("#container").find("[name='drag']").show();
});

Также в скрипке