перетаскиваемый внутри сортируемый с jquery - PullRequest
Новая
       9

перетаскиваемый внутри сортируемый с jquery

0 голосов
/ 06 октября 2011

У меня есть сортируемый список div, использующий пользовательский интерфейс jquery.Это работает нормально.

Однако я бы хотел, чтобы некоторые изображения внутри div были перетаскиваемыми.Divs продолжают иметь приоритет, хотя каждый раз, когда я пытаюсь перетащить изображение.Вместо этого перетаскиваемый сортировочный элемент перетаскивается.

Хорошо, поэтому я решил, что мне нужно перехватить события mouseenter и mouseleave на изображении и временно отключить сортируемые div-элементы, пока оно зависло.Это не сработало (может быть, я все-таки не сделал это правильно)

Кто-нибудь знает, как заставить это работать?

Извините, если раньше об этом спрашивали, но яничего не нашел, когда я искал.

РЕДАКТИРОВАТЬ: Потребовалось немного времени, чтобы найти точное место.В любом случае, вот текущий сортируемый код. 

var oldColumn = '';
var systemColumnCounter = $(".systemColumn").length;
$(".systemColumn").sortable({
    /*
    accept-option mit neuer Version von JqueryUI
    */
    accept: '.none',
    placeholder: 'systemElementPlaceHolder',
    connectWith: '.systemColumn',
    dropOnEmpty: true,
    items: 'div.systemElement',
    forceHelperSize: true,
    start: function(event, ui){
        oldColumn = ui.item.parent();
        $("body").myPopup("hideAll");



    },
    sort: function(event, ui){
        $(this).ElementBorderRemove();
        $(".systemElementPlaceHolder").addClass("systemBorderColor");
        $(".systemElementPlaceHolder").height(ui.helper.height());
    },
    stop: function(event, ui){
        var counter = 0;
        var elementBefor = '';
        var elementAfter = '';
        var Item = ui.item;
        var myColumn = Item.parent();

        if(oldColumn.children().length == 0)
        {
            oldColumn.append('<span class="columnEmptyMessage">Column is empty.</span>');
        }

        myColumn.children().each(function(){    
            if($(this).hasClass("columnEmptyMessage") && myColumn.children().length > 1)
            {
                $(this).remove();
            }               

            if($(this).attr("id") == ui.item.attr("id"))
            {
                if(counter > 0)
                {
                    elementBefor = myColumn.children().eq(counter-1).attr("id");
                }

                if(counter < (myColumn.children().length - 1))
                {
                    elementAfter = myColumn.children().eq(counter+1).attr("id");
                }
                return false;
            }
            counter++;
        })

        serialStr = elementBefor + '|' + elementAfter + '|' + myColumn.attr("id") + '|' + ui.item.attr("id");
        if(!ui.item.hasClass("systemNewElement"))
        {
            $.ajax({
                url: "includes/administration.action.php",
                type: "POST",
                data: "action=elementItemSort&items="+serialStr,
                dataType: "html",
                cache: false,
                success: function(data){                    
                    //alert(data);
                },
                error:function(x,e){
                },
                complete: function(data){
                }
            }); 
        }
    }
});

В html есть пара элементов div с классом systemColumn, а содержимое внутри является сортируемым ... Эта часть работает.

1 Ответ

1 голос
/ 12 октября 2011

Возможно, вы захотите использовать только часть вашего div (часть, в которой нет img) как единственное место в этом div, которое вы можете щелкнуть, чтобы начать сортировку, используя опцию «handle» http://docs.jquery.com/UI/API/1.8/Draggable#option-handle.

Вы можете иметь левую сторону элемента div с изображением курсора типа «переместить», чтобы пользователь видел его и знал, что нужно щелкнуть там, чтобы переместить элемент div для его сортировки.Это устраняет сложность вашего кода, а также устраняет путаницу на стороне пользователя.

...